jQuery FileUpload 不会触发“完成”答案

【问题标题】：jQuery FileUpload doesn't trigger 'done'jQuery FileUpload 不会触发“完成”
【发布时间】：2013-02-03 17:13:49
【问题描述】：

我使用jQuery-File-Upload 插件。我写了一个简单的代码来测试它——它可以工作，但并非没有问题。它不会触发done，即使文件已上传且进度条已结束。

代码如下：

$('#file_file').fileupload({
    dataType: 'json',
    autoUpload: true,
    add: function (e, data) {
        data.context = $('<p/>').text('Uploading...').appendTo(document.body);
        data.submit();
    },
    progressall: function (e, data) {
        var progress = parseInt(data.loaded / data.total * 100, 10);
        $('#progress .bar').css(
            'width',
            progress + '%'
        );
    },
    done: function (e, data) {
        alert('Done');
    }
});

我的输入就这么简单：

<input type="file" id="file_file" name="file[file]" />

【问题讨论】：

标签： jquery jquery-file-upload blueimp

【解决方案1】：

如果您的服务器没有返回 JSON，请尝试删除：

dataType: 'json'

否则您可能会以失败事件告终，这很容易测试：

fail: function(e, data) {
  alert('Fail!');
}

【讨论】：

嘿...这解决了我的问题。如果 JSON 输出有问题，则不会触发 done 回调。听起来不错，但我在搜索为什么在检查 JSON 之前没有触发回调。

【解决方案2】：

我改变了几件事，它的工作原理。这里：

$('#file_file').fileupload({
    autoUpload: true,
    add: function (e, data) {
        $('body').append('<p class="upl">Uploading...</p>')
        data.submit();
    },
    progressall: function (e, data) {
        var progress = parseInt(data.loaded / data.total * 100, 10);
        $('#progress .bar').css(
            'width',
            progress + '%'
        );
    },
    done: function (e, data) {
        $('.upl').remove();
        $.each(data.files, function (index, file) {
            /**/
        });
    }
});

【讨论】：

有效。请注意，您必须将“data.result.files”更改为“data.files”。
在 IE add 回调中。
"data.results.files" 包含更多内容，例如 thumbnailUrl 并且“名称”是服务器上文件的实际文件名，而不是 data.files 的名称，它为您提供的名称用户拥有该文件。

【解决方案3】：

我用 autoUpload: true 进行了修复，看起来当 autoUpload 属性未设置时（即使上传按预期工作），done 事件也没有触发。

【讨论】：

【解决方案4】：

今天进行了实验！如果您使用的是 PHP，请确保您的 uploadhanler PHP 文件不显示错误或警告。它会创建一个错误的 JSON 输出，当您的文件上传时，插件无法发送带有完成事件的正确 JSON 缓冲区。

为了对您的 PHP 文件进行错误跟踪，最好编写一个日志文件，而不是在此类脚本上显示错误。您可以使用：

error_reporting(0)

但不要忘记在日志文件中添加错误跟踪。当然！

【讨论】：

我将一个 200 OK 响应更改为一个简单的 json 编码字符串并且它起作用了。

【解决方案5】：

按照文档中的说明尝试this Callback Option：

$('#fileupload').bind('fileuploaddone', function (e, data) {
    alert('Done');
});

它确实对我有用。

【讨论】：

这对我有用。此功能适用于旧版本

【解决方案6】：

我正在使用 multer、multer-azure-storage 和 blueimp-file-upload。全部来自 unpkg.com。下面是使用完成触发器的多文件上传。从 10/22/17 开始工作。

js文件：

  <script src="https://unpkg.com/jquery@3.2.1/dist/jquery.min.js"></script>
  <script src="https://unpkg.com/blueimp-file-upload@9.19.1/js/vendor/jquery.ui.widget.js"></script>
  <script src="https://unpkg.com/blueimp-file-upload@9.19.1/js/jquery.iframe-transport.js"></script>
  <script src="https://unpkg.com/blueimp-file-upload@9.19.1/js/jquery.fileupload.js"></script>

页面 html，由 express 提供：

      $('#fileupload').fileupload({
          url: 'https://domainwhatevs/my-listings/edit/[property id]/gallery',
          paramName: '_file',
          dataType: 'json',
          type: 'POST',
          autoUpload: true,
          add: function (e, data) {
              console.log('uploading:', data)
              data.submit();
          },
          done: function (e, data) {
              console.log('done triggered');
              console.log(data._response.result.result[0].originalname, 'uploaded at', data._response.result.result[0].url);
              $.each(data.files, function (index, file) {
                // console.log(file.name, 'uploaded.')
                // console.log('done');
                // console.log(index);
                // console.log(file);
              });
              console.log(data);
          }
      });

// GET /my-listings/edit/[property id]/gallery

app.get(
    [
        '/my-listings/edit/:_id/gallery'
    ],
    (req, res) => {
        console.log('image gallery:', req.params._id);
        res.render('my-listings--edit--gallery', {
            _id: req.params._id,
            session: req.session
        });
    }
);

// POST /my-listings/edit/[property id]/gallery

 app.post(
    [
        '/my-listings/edit/:_id/gallery'
    ],
    upload.array('_file'),
    (req, res, next) => {
        console.log(req.files);
        res.setHeader('Content-Type', 'application/json');
        res.send({result: req.files});
        next();
    }
);

【讨论】：

【解决方案7】：

我想这不再是一个热门话题，但我刚刚通过使用 always 回调而不是 done 回调解决了这个问题。这个回调被描述为here

代码的相关部分现在如下所示：

$('#fileupload').fileupload({
        dataType: 'json',
        autoUpload: true,
        url: 'transit/',
        always: function (e, data) {
        moveFile();
    },
    
    progressall: function (e, data) {
    var progress = parseInt(data.loaded / data.total * 100, 10);
    $('#progress .progress-bar').css('width', progress + '%'
    );
  }
         
});

【讨论】：

这个答案没有用，请补充一些细节
我希望现在有足够的细节来满足Sfill_81

【解决方案8】：

 $(input).fileupload(

       url      : '...'

      ,dataType : 'json'
      ,sequentialUploads : true

       ,add      : function (e,data) {


           $.each(data.files,function(i,file){

                file.jqXHR = data.submit()
                           .success(function (result, textStatus, jqXHR) {/* ... */})
                           .error(function (jqXHR, textStatus, errorThrown) {
                             })
                           .complete(function (result, textStatus, jqXHR) { 
                               //...                   
                                     });

                 });
       }


       ,done: function (e, data) {
         console.log(data);

       }


   });

非常适合我；

区别是

url 已设置（我希望你只是忘了把它放在你的 sn-p 中）；
我将文件添加到下载队列的方式
顺序上传 (?)

编辑：

jQuery File Upload 插件使用 jQuery.ajax() 来处理文件上传请求。即使对于不支持的浏览器也是如此 XHR，感谢 Iframe Transport 插件。

为文件上传插件设置的选项被传递给 jQuery.ajax() 并允许定义任何 ajax 设置或回调。 ajax 选项文件的 processData、contentType 和 cache 设置为 false 上传到工作，不应更改。

https://github.com/blueimp/jQuery-File-Upload/wiki/Options

您也可以在代码中的某个地方更改这些 ajax 设置；无论如何，如果你的设置正确，因为它使用 $.ajax 就不能不触发完成

【讨论】：