无法使用JQuery-File-Upload从文件列表中删除文件

Question

我有一个使用JQuery-File-Upload插件的问题.我直接使用插件而不是通过作者提供的html示例页面.基本上我有一个带有一些输入的表单,其中一个是文件输入.第一次上传工作正常,但是当我尝试第二次上传时,两个文件都被发送(第一次是第一次),而它应该只是第二次上传.

例:

• 选择文件1.
• 文件1已上传.
• 成功.
• 使用jquery我用$(FORM_SELECTOR).trigger('reset')重置表单
• 选择文件2.
• 文件1和文件2已全部上传.
• 问题.

现在我有两份文件1.这不是我想要的.

显然使用ajax表单上传没有多大意义,如果它只运行一次,所以我认为有一些我缺少的东西.

有没有办法重置文件队列？

检查data.files对象时,我可以看到表单重置后文件就在那里.我该怎么做才能将插件与输入同步或清除data.files.如果我手动清除data.files数组(通过pop或data.files = []),尝试第二次上传不起作用.

我初始化上传表单如下:

    $('#file-upload-form').fileupload({
    url: 'uploads/upload',
    type: 'POST',
    dataType: 'json',
    multipart: true,
    dropZone: null,
    formAcceptCharset: 'utf-8',
    autoUpload: true,
    add: function (e, data) {
        fileUploadData = data;
        $("#upload-file-btn").click(function () {
            data.submit()
                .success(function (e, status, data) {
                    console.log("success response from post", status, data);
                    var i = '<input id="file-select-input" name="files[]" multiple/>';
                    $('#file-select-input').replaceWith(i);
                })
        });
    }
});

Answer 1

您可以很容易地重置输入。如果这对您不起作用，您可以将该文件存储在某个地方。

演示版

$("button#1").click(function(){
  //check file
    alert($("input").val());
      return false;
});
$("button#2").click(function(){
  //reset form
    $("form")[0].reset();
      return false;
}); 
$("button#3").click(function(){
  //replace input
    $("input").replaceWith($('<input type="file"/>'));
    return false;
});