Javascript 无法使用JQuery文件上载从文件列表中删除文件

我在使用插件时遇到问题。我直接使用插件，而不是通过作者提供的html示例页面。基本上我有一个表单，有一些输入 其中之一是文件输入。第一次上传效果很好，但当我尝试第二次上传时，两个文件都会第二次发送第一个文件，而这应该是第二个文件

例如：

选择文件1。 文件1已上载。 成功 使用jquery，我用$form\u选择器重置表单。触发器“reset” 选择文件2。 文件1和文件2都已上载。 问题 现在我有两份文件1。这不是我想要的

显然，如果ajax表单上传只运行一次，那么使用它没有多大意义，所以我假设我缺少了一些东西

有没有办法重置文件队列

当检查data.files对象时，我可以看到文件在表单后面 已重置。如何将插件与输入同步或清除data.file文件。 如果我通过pop或data.files=[]手动清除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);
                })
        });
    }
});

---

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

---

我有一个自定义的.add事件处理程序，我在其中调用了.Off单击我的按钮：

                add: function (e, data) {

                    $('#btnstartupload').off("click");
                    data.context = $('#btnstartupload')
                        .click(function () {
                            data.submit();
                            $(".fileinput-button").hide();
                        });
}

---

我的代码是这样的，当单击从JSP页面删除多个文件的链接时，IE11、Chrome和Firefox都可以

function removeFileLink(id) {
   var fileName = document.getElementById("import_file_" + id).value.replace(/^.*[\\\/]/, '');
   var objFiles = document.getElementsByName("import_fileList");
   for(var i=0; i<objFiles.length; i++){
       if(objFiles[i].value.replace(/^.*[\\\/]/, '') == fileName) {
           $(objFiles[i]).remove();                        
       }
   }
   document.getElementById("import_form").enctype="multipart/form-data";
   document.getElementById("import_form").submit();           
   return false;          
}

---

我遇到了同样的问题。令人费解的是，为什么图书馆会重新发送以前上传的文件。我试图销毁它，重新初始化它并清除/重置实际的文件输入字段，但没有一个有效

我提出的解决方案是通过将文件名存储在一个数组中，并在文件已上载时签入发送回调来跟踪所有上载尝试

回拨：

send: function (e, data) {
            var file = data.files[0];

            // if we already attempted to upload a file with the same file name
            // do not send it in order to avoid duplicates
            if (existsInAttemptedUploads(file.name)) {
                return false;
            }
        },

助手方法：

// list of file names that a user attempted to upload
var attemptedUploads = [];

// adds a file name to the list of attempted uploads
function addAttemptedUpload(fileName) {
    attemptedUploads.push(fileName);
};

// removes a given file name from the list of attempted uploads
function removeAttemptedUpload(fileName) {
    var index = $.inArray(fileName, attemptedUploads);

    if (index > -1) {
        attemptedUploads.splice(index, 1);
    }
};

// checks if a given file name is in the list of attempted uploads
function existsInAttemptedUploads(fileName) {
    var result = $.inArray(fileName, attemptedUploads);

    if (result == -1) {
        return false;
    }

    return true
};

确保更新完成和失败回调中的attemptedUploads列表，并从列表中删除已删除的文件。例如：

done: function (e, data) {
            var id = e.target.id;

            // List all uploaded files
            $.each(data.result.files[0], function (index, file) {
                // add the current file name to the list of attempted file names
                addAttemptedUpload(file.origFileName);

                $('#uploadedFiles').append('<li id="' + file.id + '" data-orig-filename="' + file.origFileName + '">' + file.fileName + ' <a class="removeFile" href="<?php echo $deleteUrl; ?>/' + file.id + '">' + ' Remove</a></li>');
            });
        },

---

我也遇到了同样的问题，我解决这个问题的唯一办法就是在文件已经上传的情况下签入提交回调。我只是检查文件名是否包含在数组文件名中，在提交之前我会推送当前文件名，并在下次检查数组中是否存在下一个文件名，如果是，则取消提交

var fileNames = new Array();

$('#uploadfile').fileupload({
  submit: function(e, data) ->
    var fileName = data.files[0].name;
    if ($.inArray(fileName, fileNames) === -1)
      fileNames.push(fileName);
    else
      return false;
});

---

您可以替换输入，谢谢。替换输入基本上完成了类似于触发重置的操作。我之前已经替换了输入，但是插件仍然会上传这两个文件。然后输入包含一个文件？您可以通过dev工具控制台和$yourinput.val进行检查。您找到解决方案了吗？这是关于这个库的最常见的问题，我还没有找到一个明确的答案。文件中根本没有提到这一点。令人惊讶的是，这样一个核心功能的文档记录是多么糟糕。我从来没有让它工作过。我最终直接使用了文件api，并放弃了对旧浏览器的支持。我没有发现任何文件上传插件在我需要支持的边缘案例中没有失败。抱歉，没有回答。谢谢，但是如果你阅读我对你评论的回复，你会发现问题不在于清除实际的文件输入，而在于插件本身。我重置文件输入本身没有任何问题。通过更换或重置触发器。换言之，我已经完全尝试了你推荐的内容，但没有效果。我认为这个问题与插件有关，因为替换输入应该符合我们的预期。事实上确实如此。它会清除文件输入，但插件仍会上载这两个文件。你肯定是在重置表单吗？因为$'input[type=file]'。触发'reset'；在我的示例中什么都不做。也许它不起作用，尽管我知道将重置事件发送到表单本身就可以了。即使更换了，我也没有看到预期的结果。

var fileNames = new Array();

$('#uploadfile').fileupload({
  submit: function(e, data) ->
    var fileName = data.files[0].name;
    if ($.inArray(fileName, fileNames) === -1)
      fileNames.push(fileName);
    else
      return false;
});