2018-11-13 關於uploadify多檔案上傳問題
阿新 • • 發佈：2018-12-21
一、上傳檔案
1.HTML程式碼：
<tr> <td align="right"> 上傳檔案： </td> <td align="left" colspan="1"> <input type="file" id="file_uploadify" name="file_uploadify1" style="width: 60px;" /> </td> <td> </td> </tr> <tr id='file_tr'> <td align="right"> 檔案預覽: </td> <td align="left" colspan="4"> <div id="showFilename" align="left" style="border: 1px solid #ccc; padding: 16px"> <div id="file_name"> </div> </div> </td> <td> </td> </tr>
2.js部分
//檔案上傳 $("#file_tr").hide(); $('#file_uploadify').uploadify({ 'uploader': '../lib/Uploadify/uploadify.swf', // uploadify.swf 檔案的相對路徑，該swf檔案是一個帶有文字BROWSE的按鈕，點選後淡出開啟檔案對話方塊，預設值：uploadify.swf。 'script': '../Ajax/Ajax_UploadifyExposure.ashx', //後臺處理程式的相對路徑 'cancelImg': '../lib/uploadify/cancel.png', //取消的圖示路徑 //'queueID': 'fileQueue1', //檔案佇列的ID，該ID與存放檔案佇列的div的ID一致。 'auto': true, //設定為true當選擇檔案後就直接上傳了，為false需要點選上傳按鈕才上傳 'buttonText': '', //瀏覽按鈕的文字，預設值：BROWSE 'buttonImg': '../lib/uploadify/browse.jpg', //瀏覽按鈕的圖片的路徑 'multi': true, //設定為true時可以上傳多個檔案,false為單個上傳 //'sizeLimit':'10MB', //設定上傳檔案的容量最大值。這個值可以是一個數字或者字串。如果是字串，接受一個單位（B,KB,MB,GB）。如果是數字則預設單位為KB。設定為0時表示不限制 'fileDesc': "請選擇格式正確的檔案", // 這個屬性值必須設定fileExt屬性後才有效，用來設定選擇檔案對話方塊中的提示文字, 'fileExt': '*.*', //設定可以選擇的檔案的型別，格式如：'*.doc;*.pdf;*.rar' 。 'scriptData': { 'methed': 'uploadFile', 'arg1': 'value1' }, 'onComplete': function (event, queueID, file, serverData, data) { //每上傳一個檔案後都執行 var redate = serverData.split('|'); //用|分隔 if (redate[0] != '') { alert(redate[0]); //顯示錯誤資訊 has_file = 0; } else { has_file = 1; $('#file_name').append('<div>' + redate[2] + '<img style="position:relative;top:5px;left:6px;cursor:pointer" src="../Images/MenuIcon/del.png" onmouseenter="delFile()" class="delFile"' + '/>' + '<input type="hidden"' + ' id=' + '"' + " P_FILE_URL" + data.fileCount + '"' + 'name="P_FILE_URL" value="' + redate[1] + '" />' + '<input type="hidden"' + 'id=' + '"' + "P_FILE_NAME" + data.fileCount + '"' + 'name="P_FILE_NAME" value="' + redate[2] + '" />' + '</div>' ); $("#file_tr").show(); } }, 'onError' : function (file, errorCode, erorMsg, errorString) { if (errorString.status==404) alert('Could not find upload script.'); // else if (errorString.type==="HTTP" ) // alert('error ' + errorString.type + ": " + errorString.status); else if (errorString.type === "File Size") alert("檔案：" + erorMsg.name + ' ' + ' 已超出檔案大小限制！'); else alert('error ' + errorString.type + ": " + errorString.info); } //一個檔案完成上傳但返回錯誤時觸發，有以下引數 /* file 完成上傳的檔案物件 errorCode 返回的錯誤程式碼 erorMsg 返回的錯誤資訊 errorString 包含所有錯誤細節的可讀資訊 */ }); //上傳外掛結束
當上傳多檔案時，最需要注意的是上傳完成後的操作，也就是'onComplete': function (event, queueID, file, serverData, data),
其中的五個引數最主要的是後兩個，serverData包含了你上傳的檔案的資訊，data裡包含了上傳佇列的資訊。
特別需要注意的是，在進行多檔案上傳的時候，onComplete函式就是一個迴圈，要對多檔案進行操作，後面就不必再做迴圈操作，所以可以直接在function（）{}裡面進行字串的拼接，要是單檔案上傳，可以直接用val()方法，但是多檔案上傳就必須進行字串和HTML的操作，不然每上傳一個檔案後面上傳的檔案都會把前面上傳的給覆蓋了，最後就只能獲取到佇列最後面的檔案。多圖片上傳和多圖片上傳是一樣的原理，在此不再多說，下面貼上多圖片上傳的程式碼。
二、上傳圖片
1.HTML部分
<tr>
<td align="right">
上傳圖片：
</td>
<td align="left" colspan="4">
<input type="file" id="img_uploadify" name="img_uploadify" style="width: 60px;" />
</td>
<td>
</td>
</tr>
<tr id='img_tr'>
<td align="right">
圖片預覽:
</td>
<td align="left" colspan="4">
<div id="showImg" align="left">
</div>
</td>
<td>
</td>
</tr>2.js部分
//圖片上傳
$("#img_tr").hide();
$('#img_uploadify').uploadify({
'uploader': '../lib/Uploadify/uploadify.swf', // uploadify.swf 檔案的相對路徑，該swf檔案是一個帶有文字BROWSE的按鈕，點選後淡出開啟檔案對話方塊，預設值：uploadify.swf。
'script': '../Ajax/Ajax_UploadifyExposure.ashx', //後臺處理程式的相對路徑
'cancelImg': '../lib/uploadify/cancel.png', //取消的圖示路徑
//'queueID': 'fileQueue1', //檔案佇列的ID，該ID與存放檔案佇列的div的ID一致。
'auto': true, //設定為true當選擇檔案後就直接上傳了，為false需要點選上傳按鈕才上傳
'buttonText': '', //瀏覽按鈕的文字，預設值：BROWSE
'buttonImg': '../lib/uploadify/browse.jpg', //瀏覽按鈕的圖片的路徑
'multi': true, //設定為true時可以上傳多個檔案,false為單個上傳
'fileDesc': "請選擇圖片格式檔案", // 這個屬性值必須設定fileExt屬性後才有效，用來設定選擇檔案對話方塊中的提示文字,
'fileExt': '*.jpg;*.JPG;*.jpeg;*.JPEG;*.png;*.PNG;*.bmp;*.BMP', //設定可以選擇的檔案的型別，格式如：'*.doc;*.pdf;*.rar' 。
'scriptData': {
'methed': 'uploadFile',
'arg1': 'value1'
},
'onComplete': function (event, queueID, file, serverData, data) { //每上傳一個檔案後都執行
var redate = serverData.split('|'); //用|分隔
if (redate[0] != '') {
alert(redate[0]); //顯示錯誤資訊
has_file = 0;
} else {
has_file = 1;
$("#showImg").append('<div class="img_info_Box">' + '<div style="display:inline-block;max-width:100px;max-height:100px">' + '<img src=' + '"' + '..' + redate[1] + '"' + 'id=' + '"' + 'IMG' + data.fileCount + '"' + 'alt="" style="max-width:100%;max-height:100%;cursor:pointer" onclick="javascript:window.open(this.src)" /></a>' + '</div>' + '<textarea style="margin-left:6px" rows="5" cols="26"' + ' id=' + '"' + 'IMG_DESCRIPTION' + data.fileCount + '"' + '" name=" IMG_DESCRIPTION"></textarea>' + '<input type=hidden name="P_IMG_URL" id=' + '"' + 'P_IMG_URL' + data.fileCount + '"' + ' value=' + redate[1] + '>' + '<div style="position:relative;display:inline-block;left:9px;top:-26px;cursor:pointer"><img src="../Images/MenuIcon/del.png" class="del" onmouseenter="delImg()"/>' + '</div>');
$("#img_tr").show();
}
}
}); //上傳外掛結束