javascript - 如何为文件上传添加删除按钮/功能？

Question

这个问题已经有答案了:

Clearing <input type='file' /> using jQuery (27 个回答)

已关闭 8 年前。

===============编辑================================= ====================
您好!非常感谢所有回答并试图帮助我的人。我能够按照 @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" />

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