jquery - jQuery FileUpload 不会触发“完成”

Question

我使用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]" />

score 30 · Accepted Answer

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

dataType: 'json'

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

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

score 10 · Accepted Answer

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

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

score 6 · Accepted Answer

我用autoUpload: true修复，看起来当 autoUpload 属性未设置时（即使上传按预期工作），完成事件也不会被触发。

score 2 · Accepted Answer

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

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

error_reporting(0)

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

score 1 · Accepted Answer

按照文档中的说明尝试此回调选项：

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

它确实对我有用。

score 0 · Accepted Answer

我正在使用 multer、multer-azure-storage 和 blueimp-file-upload。全部来自 unpkg.com。下面是使用完成触发器的多文件上传。截至 2017 年 10 月 22 日工作。

.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/[属性 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/[属性 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();
    }
);

score 0 · Accepted Answer

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

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

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

score -1 · Accepted Answer

 $(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 已设置（我希望你只是忘了把它放在你的代码片段中）；
我将文件添加到下载队列的方式
顺序上传（？）

编辑：

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

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

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

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

jquery - jQuery FileUpload 不会触发“完成”

8 回答 8

Related

Reference