建立 Js圖片上傳實現方法總結
阿新 • • 發佈：2018-12-30
$(function(){
$("#file_upload").uploadify({
'auto':true, //是否為自動上傳
'swf':'/uploadify/uploadify.swf', //上傳的flash外掛
'uploader':'/uploadify/uploadify.php', //後臺處理上傳檔案的指令碼
'buttonImage' :'/uploadify/browser.btn.png', //上傳按鈕的外觀為自定義圖片
'buttonText':'上傳圖片', //上傳按鈕的文字資訊
'debug':true, //開啟uploadify的除錯模式
'fileObjName':'myFile', //伺服器端接收的物件,如$_POST['myFile']
'fileSizeLimit':'5MB', //上傳檔案的最大值
'fileTypeDesc':'支援的格式：', //可選擇檔案型別說明
'fileTypeExts':'*.jpg;*.png;*.bmp;*.gif', //允許的副檔名
'formData':{'somekey':'somevalue','someotherkey':1}, //上傳檔案時上傳需要的表單值
'height':'50px', //按鈕的高度
'width':'100px', //按鈕的寬度
'method':'post', //上傳的方式，預設為post
'multi':true, //允許批量上傳，預設為true
'preventCaching':true, //是否阻止快取
'progressData':'percentage', //上傳佇列顯示為速度還是百分比
'onDialogOpen':function(){ alert('ok');} //開啟上傳按鈕瀏覽框時觸發事件
'onUploadStart':function(){ } //檔案開始上傳時觸發事件
'onUploadSuccess':function(file,data,response){ //檔案上傳成功時觸發事件
//成功以後這裡繼續操作
},
'onFallback':function(){ //檢測FLASH失敗呼叫
alert("請安裝FLASH控制元件後再試。");
},
//正在上傳。。
'onSelect': function(file){
$("#alertDiv").text("正在上傳...");
$("#alertDiv").show();
},
'onSelectError':function(file, errorCode, errorMsg){
switch(errorCode) {
case -100:
alert("上傳的檔案數量已經超出系統限制的"+$('#file_upload').uploadify('settings','queueSizeLimit')+"個檔案！");
break;
case -110:
alert("檔案 ["+file.name+"] 大小超出系統限制的"+$('#file_upload').uploadify('settings','fileSizeLimit')+"大小！");
break;
case -120:
alert("檔案 ["+file.name+"] 大小異常！");
break;
case -130:
alert("檔案 ["+file.name+"] 型別不正確！");
break;
}
},
//所有檔案處理完成時
'onQueueComplete': function(queueData){
alert(queueData.uploadsSuccessful);
}
});
});
$("#file_upload").uploadify({
'auto':true, //是否為自動上傳
'swf':'/uploadify/uploadify.swf', //上傳的flash外掛
'uploader':'/uploadify/uploadify.php', //後臺處理上傳檔案的指令碼
'buttonImage' :'/uploadify/browser.btn.png', //上傳按鈕的外觀為自定義圖片
'buttonText':'上傳圖片', //上傳按鈕的文字資訊
'debug':true, //開啟uploadify的除錯模式
'fileObjName':'myFile', //伺服器端接收的物件,如$_POST['myFile']
'fileSizeLimit':'5MB', //上傳檔案的最大值
'fileTypeDesc':'支援的格式：', //可選擇檔案型別說明
'fileTypeExts':'*.jpg;*.png;*.bmp;*.gif', //允許的副檔名
'formData':{'somekey':'somevalue','someotherkey':1}, //上傳檔案時上傳需要的表單值
'height':'50px', //按鈕的高度
'width':'100px', //按鈕的寬度
'method':'post', //上傳的方式，預設為post
'multi':true, //允許批量上傳，預設為true
'preventCaching':true, //是否阻止快取
'progressData':'percentage', //上傳佇列顯示為速度還是百分比
'onDialogOpen':function(){ alert('ok');} //開啟上傳按鈕瀏覽框時觸發事件
'onUploadStart':function(){ } //檔案開始上傳時觸發事件
'onUploadSuccess':function(file,data,response){ //檔案上傳成功時觸發事件
//成功以後這裡繼續操作
},
'onFallback':function(){ //檢測FLASH失敗呼叫
alert("請安裝FLASH控制元件後再試。");
},
//正在上傳。。
'onSelect': function(file){
$("#alertDiv").text("正在上傳...");
$("#alertDiv").show();
},
'onSelectError':function(file, errorCode, errorMsg){
switch(errorCode) {
case -100:
alert("上傳的檔案數量已經超出系統限制的"+$('#file_upload').uploadify('settings','queueSizeLimit')+"個檔案！");
break;
case -110:
alert("檔案 ["+file.name+"] 大小超出系統限制的"+$('#file_upload').uploadify('settings','fileSizeLimit')+"大小！");
break;
case -120:
alert("檔案 ["+file.name+"] 大小異常！");
break;
case -130:
alert("檔案 ["+file.name+"] 型別不正確！");
break;
}
},
//所有檔案處理完成時
'onQueueComplete': function(queueData){
alert(queueData.uploadsSuccessful);
}
});
});