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

2022-01-11 00:00:00 file-upload jquery-plugins javascript ajax jquery-file-upload

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

I have an issue using the JQuery-File-Upload plugin. I am using the plugin directly and not through the author's provided html example pages. Basically I have a form with some inputs one of which is a file input. The first upload works fine but when I attempt a second upload both files are sent (the first one for the second time) when it should only be the second one.

例子:

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

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

Now I have two copies of file 1. This is not what I want.

显然，如果仅能工作一次，那么使用 ajax 表单上传并没有多大意义，所以我认为我缺少一些东西.

Obviously there isn't much point of using an ajax form upload if it only works once so I assume that there is something I am missing.

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

Is there a way to reset the file queue?

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

When examining the data.files object I can see that the files are there after the form is reset. What can I do to sync the plugin with the input or clear out the data.files. If I manually clear out the data.files array (via pop or data.files = []) attempting a second upload does not work.

我这样初始化上传表单:

I init the upload form like this:

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

推荐答案

我遇到了同样的问题，我设法解决的唯一方法是在文件已上传的情况下检查提交回调.我只是检查文件名是否包含在数组 fileNames 中，我在提交之前推送当前文件名，并在下一次检查下一个文件是否存在于数组中，如果是则取消提交.

I had the same problem and the only way I've managed to solve that was to check in the submit callback if the file was already uploaded. I just check if the file name is included in the array fileNames which I push the current file name before the submission and checks on the next time if the next one is present on the array and if so cancel the submission.

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

相关文章