542
Web直傳解決並發上傳出錯，導致任務停止
Web直傳解決並發上傳出錯，導致任務停止
但是上述事例有一個現象
就是當一個文件在上傳過程中，這個時候再選擇一個不符合條件的文件，會導致正在上傳的文件終止。
如此圖
h3. 首先我們來分析一下為什麼會出現這種現象
出現這種現象的原因是：plupload這個控件導致的。
plupload提示了filter
var uploader = new plupload.Uploader({
runtimes : 'html5,flash,silverlight,html4',
browse_button : 'selectfiles',
//multi_selection: false,
container: document.getElementById('container'),
flash_swf_url : 'lib/plupload-2.1.2/js/Moxie.swf',
silverlight_xap_url : 'lib/plupload-2.1.2/js/Moxie.xap',
url : 'https://oss.aliyuncs.com',
/*
注意在這裏添過加濾的功能，會打斷正在上傳的隊列。如果想選擇錯誤的文件不打斷，請在FileFilterd這個函數裏麵添加過濾的邏輯
*/
filters: {
mime_types : [ //隻允許上傳圖片和zip,rar文件
{ title : "Image files", extensions : "jpg,gif,png,bmp" },
{ title : "Zip files", extensions : "zip,rar" }
],
//max_file_size : '10mb', //最大隻能上傳10mb的文件
prevent_duplicates : true //不允許選取重複文件
},
filters參數指定上傳時指定plupload會對上傳文件的限製。我們來看一下。如果此時再上傳一個非法的條件，會出現什麼情況。要看一下plupload的源碼
plupload.addFileFilter('max_file_size', function(maxSize, file, cb) {
var undef;
maxSize = plupload.parseSize(maxSize);
// Invalid file size
if (file.size !== undef && maxSize && file.size > maxSize) {
this.trigger('Error', {
code : plupload.FILE_SIZE_ERROR,
message : plupload.translate('File size error.'),
file : file
});
cb(false);
} else {
cb(true);
}
});
這樣就當發現文件大小出錯之後，就出現文件尺寸出錯了。直接跳到出錯了。會跳轉到上層的Error函數。相應的上傳也出現了停止。
解決的方法
這個問題解決思路是自己實現Filter函數，因為用默認的函數，會觸發代碼的出錯處理流程。我們自己采用自己的出錯邏輯。如果出現，隻報錯，不影響正在處理的請求。
plupload提供了很多“勾子函數”，方便對各種情況下進行處理。我們現在增加一個函數：
FileFiltered
這個函數會在文件添加後觸發。函數的邏輯就是，判斷大小是不是符合。如果不符合，提示出錯信息，然後將文件從插件remove
如果成功，就添加文件。
FileFiltered : function(up, file) {
/*
在這裏做過濾文件 上傳的動作，避免解決因為上傳文件有問題下在上傳的隊列出錯。如果要實現這個，需要把filters相關功能禁止。在這裏實現相關的功實現過濾的需求。
*/
if (file.size < 5 * 1024 * 1024)
{
document.getElementById('console').appendChild(document.createTextNode(file.name + " is too small to upload"));
up.removeFile(file)
}
else if (file.size > 100 * 1024 * 1024)
{
document.getElementById('console').appendChild(document.createTextNode(file.name + " is too large to upload"));
up.removeFile(file)
}
else
{
document.getElementById('ossfile').innerHTML += '<div >' + file.name + ' (' + plupload.formatSize(file.size) + ')<b></b>'
+'<div ><div ></div></div>'
+'</div>';
}
},
最後更新：2017-04-27 15:00:48