如何为文件上传添加删除按钮/功能？ [复制]

Question

================编辑================================= =====================
您好！非常感谢所有回答并试图帮助我的人。我能够按照@Kaiido 的建议使用 iframe 来获得我需要的东西，因为我以前的代码在 ie8 中不起作用。也感谢这一点：JQuery file posting using iframe 再次。非常感谢！

============================================== ============================
我有一个上传表格。我可以在提交时上传文件。问题是一旦用户选择要上传的文件，我就会尝试添加/附加删除按钮。

我需要它看起来像这样：

目标：
1.当用户点击删除按钮时，文件列表应该回到空。
2. 更改文件的行为应该类似于单击“删除”按钮。
3. 它需要在 IE 8 中工作。它很烂。

输入表格：

Attachment: <input type="file" name="upload" id="upload">
<a href="#" id="btnSubmit">Submit</a>

JS：

var files;

$('input[type=file]').on('change', prepareUpload);

function prepareUpload(event)
{   
    files = event.target.files;  // I'm not sure but the problem might be on this part. Maybe I could get the opposite of this or negate this?
}

function uploadFiles(event)
{
    event.stopPropagation(); 
    event.preventDefault();

    var data = new FormData();

    $.each(files, function(key, value)
    {
        data.append(key, value);
    });

    $.ajax({
        url: 'execs/upload.php?files',
        type: 'POST',
        data: data,
        cache: false,
        dataType: 'json',
        processData: false, 
        contentType: false, 
        success: function(data)
        {
            console.log('Uploaded');
        },
        error: function()
        {
            console.log('Failed');
        }
    })
}

$("#btnSubmit").click(function(e)
{
    uploadFiles(event);
})

非常感谢您的帮助！

Answer 1

您需要像这样重置您的上传控件

$(document).ready(function() {
  de();

  $("#fileU").on("change", function() {



    if ($("#fileU").val() != "") {
      $("input[type=button]").attr("style", "display:block");
    } else {
      de();
    }
  });
  $("input[type=button]").click(function() {
    $("#fileU").val('');
    de();
  })

})

function de() {
  $("input[type=button]").attr("style", "display:none");
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="file" id="fileU" multiple/>
<input type="button" value="delete FIle" />

当您选择一个文件并想要删除它时，您只需将'' 分配给您的上传控制值。

Answer 2

我做了一个小提琴，现在可以工作了，检查this。希望这可以帮助。我已将 js 修改如下（已注释）。顺便说一句，我没有看到删除按钮。

var files;
$('#btnSubmit').hide(); // ADDED

$('input[type=file]').change(function(){ // MODIFIED
    if(this.value!=''){ 
        prepareUpload();
    }else $('#btnSubmit').hide();
});

function prepareUpload(event)
{   
    $('#btnSubmit').show(); 
    files = event.target.files;
}

function uploadFiles(event)
{
    event.stopPropagation(); 
    event.preventDefault();

    var data = new FormData();

    $.each(files, function(key, value)
    {
        data.append(key, value);
    });

    $.ajax({
        url: 'execs/upload.php?files',
        type: 'POST',
        data: data,
        cache: false,
        dataType: 'json',
        processData: false, 
        contentType: false, 
        success: function(data)
        {
            console.log('Uploaded');
        },
        error: function()
        {
            console.log('Failed');
        }
    })
}

$("#btnSubmit").click(function(e)
{
    uploadFiles(event);
})