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]" />

Answer 1

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

dataType: 'json'

否则，您可能最终会遇到一个容易测试的失败事件：

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

Answer 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) {
            /**/
        });
    }
});

Answer 3

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

Answer 4

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

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

这对我有用。

Answer 5

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

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

error_reporting(0)

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

Answer 6

我使用multer，multer-azure-storage和blueimp-file-upload。全部来自unpkg.com。下面是带有完成触发器的多文件上传。工作时间为10/22/17。

js file：

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

Answer 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 + '%'
    );
  }
         
});

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

       }


   });

对我来说很完美;

差异

设置了网址（我希望你忘了把它放在你的代码片段中）;
我将文件添加到下载队列的方式
顺序上传（？）

编辑：

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，不能触发完成

jQuery FileUpload没有触发＆＃39;完成＆＃39;

8 个答案: