jQuery FileUpload不会触发'完成'

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

下面的代码：

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

来源

2013-02-03 Tomek Buszewski

我改变了一些事情，它的工作原理。在这里：

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

来源

2013-02-03 18:06:40

作品。请注意，您必须将“data.result.files”更改为“data.files”。 – joan16v

在IE <10中推送文件的解决方案全是关于“data.submit（）;”在'add'回调中。 –

“data.results.files”包含更多内容，如thumbnailUrl，而“name”是服务器上文件的实际文件名，而不是data.files的名称，该名称为用户提供了该文件的名称。 – Ian

-1

$(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的文件上传插件利用jQuery.ajax的（）为文件上传请求。即使对于不支持 XHR的浏览器也是如此，这要归功于Iframe传输插件。

为文件上传插件设置的选项传递给jQuery.ajax（）并允许定义任何ajax设置或回调。对于上传文件，processData，contentType和cache的ajax选项设置为false，不应更改。

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

地方在你的代码，你可以有也改变了那些AJAX设置;无论如何说，如果你有你的设置正确，因为它是利用$ .ajax做的不能不被触发

来源

2013-02-03 17:53:36 mikakun

我修复与autoUpload：真，它看起来像时，未设置autoUpload属性（即使上传按预期工作）不会触发事件完成。

来源

2013-05-29 09:47:15

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

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

来源

2013-08-09 22:34:27 bradw2k

heh ...这解决了我的问题。如果JSON输出错误，则不会触发完成的回调。听起来不错，但我在查找为什么在检查JSON之前没有触发回调。 –

这也解决了我的问题。谢谢！ –

尝试今天：

dataType: 'json'

否则你可能会以失败事件，这是很容易测试就要结束了！如果您使用PHP，请确保您的uploadhanler PHP文件不显示错误或警告。它会创建一个错误的JSON输出，并且当您的文件上传时，插件无法发送带有完成事件的正确JSON缓冲区。

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

error_reporting(0)

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

来源

2016-06-08 12:35:34 YlianEstevez

尝试this Callback Option如文档中描述：我

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

它肯定的作品。

来源

2016-06-18 17:40:56 Waqleh

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

js文件：

<script src="https://unpkg.com/[email protected]/dist/jquery.min.js"></script> 
    <script src="https://unpkg.com/[email protected]/js/vendor/jquery.ui.widget.js"></script> 
    <script src="https://unpkg.com/[email protected]/js/jquery.iframe-transport.js"></script> 
    <script src="https://unpkg.com/[email protected]/js/jquery.fileupload.js"></script>

HTML页面，从快递服务：

 $('#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 /我 - 上市/编辑/ [属性ID] /画廊

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

来源

2017-10-21 17:24:50 xemasiv

jQuery FileUpload不会触发'完成'

回答

相关问题