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不會觸發'完成'

回答

相關問題