Question

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

示例：

选择了文件1。
文件1已上传。
成功。
使用jquery我使用$（FORM_SELECTOR）.trigger重置表单（＆＃39; reset＆＃39;）
选择了文件2。
文件1和文件2已全部上传。
问题。

现在我有两个文件副本1.这不是我想要的。

显然，如果只使用一次ajax表单，那就没有多大意义了，所以我认为有些东西是我遗漏的。

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

在检查data.files对象时，我可以看到文件在表单之后重置。我该怎么做才能将插件与输入同步或清除data.files。如果我手动清除data.files数组（通过pop或data.files = []）尝试a 第二次上传无效。

我按照以下方式初始化上传表单：

    $('#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

我遇到了同样的问题，我设法解决的唯一方法就是在文件上传后检查提交回调。我只是检查文件名是否包含在数组fileNames中，我在提交之前推送当前文件名，并在下次检查下一次是否在阵列上存在，如果是，则取消提交。 / p>

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;
});

Answer 2

您可以非常轻松地重置输入。如果这对您不起作用，您可以将文件存储在somwhere。

DEMO

$("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;
});

Answer 3

我有一个自定义.add事件处理程序，我在其中调用.off（＆＃34;点击＆＃34;）：

                add: function (e, data) {

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

Answer 4

我遇到了同样的问题。令人费解的是图书馆重新发送以前上传的文件的原因。我试图破坏它，重新初始化它并清除/重置实际的文件输入字段，但它们都没有工作。

我想出的解决方案是通过将文件名存储在一个数组中并检入＆＃34; send＆＃34;来跟踪所有上传尝试。如果文件已经上传，则回调。

回调：

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
};

请务必更新＆＃34;完成＆＃34;中的attemptUploads列表并且＆＃34;失败＆＃34;回调并删除列表中的文件（如果已删除）。例如：

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>');
            });
        },

Answer 5

我的代码就是这样，当从JSP页面点击多个文件的Remove链接时，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;          
}

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

5 个答案: