本文實例講述了SWFUpload多文件上傳及文件個數限制的方法。分享給大家供大家參考，具體如下：
SWFUpload是一個基於flash與JavaScript的客戶端文件上傳組件。
handlers.js文件
完成文件入列隊（fileQueued） →
完成選擇文件（fileDialogComplete） → 開始上傳文件（uploadStart） → 上傳處理（uploadProgress） → 上傳成功（uploadSuccess） → 上傳完成（uploadComplete） →
列隊完成（queueComplete）
如上所示，單選文件順序執行以上回調函數，需要注意的是選擇多個文件，fileQueued、queueComplete只會執行一次，而fileDialogComplet...→ uploadComplete每個文件都執行一次。
參考官方例子完成基本功能後，仿趕集採用iframe的方式
為了實現縮略圖預覽以及刪除和上傳圖片個數的限制
顯示縮略圖，生成刪除縮略圖的按鈕，
thumbImages為父頁面顯示縮略圖的div
src_s為生成的縮略圖地址
src_b為原圖地址
serverData是圖片上傳處理頁面返回的數據成功則以success|縮略圖地址|原圖地址這樣的格式返回
function uploadSuccess(file, serverData) { try { var result = serverData.split('|'); if(result[0] != 'success') { var progress = new FileProgress(file, this.customSettings.progressTarget); progress.setError(); progress.setStatus(serverData); progress.toggleCancel(false); } else { var progress = new FileProgress(file, this.customSettings.progressTarget); progress.setComplete(); progress.setStatus("上傳完成"); progress.toggleCancel(false); var img_url_s = result[1]; var img_url_b = result[2]; addImage(img_url_s,img_url_b); } } catch (ex) { this.debug(ex); }} function addImage(src_s,src_b) { var newDiv = parent.document.createElement("div"); newDiv.style.margin = "5px"; newDiv.style.height = "60px"; newDiv.style.width = "80px"; newDiv.style.border = "1px solid #7F9DB9"; newDiv.style.cssFloat = "left"; newDiv.style.styleFloat = "left"; newDiv.style.position = "relative"; var newA = parent.document.createElement("a"); newA.className = "delete"; newA.title = "刪除"; newA.href = "javascript::"; newA.onclick = function(){delDiv(newDiv);}; var newInput_s = parent.document.createElement("input"); newInput_s.type = "hidden"; newInput_s.value = src_s; newInput_s.name = "image_s[]"; newA.appendChild(newInput_s); var newInput_b = parent.document.createElement("input"); newInput_b.type = "hidden"; newInput_b.value = src_b; newInput_b.name = "image_b[]"; newA.appendChild(newInput_b); var newImgDiv = parent.document.createElement("div"); var newImg = parent.document.createElement("img"); newImg.style.height = "60px"; newImg.style.width = "80px"; newImgDiv.appendChild(newImg); newDiv.appendChild(newImgDiv); newDiv.appendChild(newA); parent.document.getElementById("thumbImages").appendChild(newDiv); if (newImg.filters) { try { newImg.filters.item("DXImageTransform.Microsoft.Alpha").opacity = 0; } catch (e) { // If it is not set initially, the browser will throw an error. This will set it if it is not set yet. newImg.style.filter = 'progid:DXImageTransform.Microsoft.Alpha(opacity=' + 0 + ')'; } } else { newImg.style.opacity = 0; } newImg.onload = function () { fadeIn(newImg, 0); }; newImg.src = src_s;}function fadeIn(element, opacity) { var reduceOpacityBy = 5; var rate = 30; // 15 fps if (opacity < 100) { opacity += reduceOpacityBy; if (opacity > 100) { opacity = 100; } if (element.filters) { try { element.filters.item("DXImageTransform.Microsoft.Alpha").opacity = opacity; } catch (e) { // If it is not set initially, the browser will throw an error. This will set it if it is not set yet. element.style.filter = 'progid:DXImageTransform.Microsoft.Alpha(opacity=' + opacity + ')'; } } else { element.style.opacity = opacity / 100; } } if (opacity < 100) { setTimeout(function () { fadeIn(element, opacity); }, rate); }}關於剩餘可上傳文件個數的處理
function queueComplete(numFilesUploaded) { this.setButtonDisabled(false); var stats = this.getStats(); var status = document.getElementById("divStatus"); status.innerHTML = "已上傳" + stats.successful_uploads + " 個文件,還可以上傳"+ parseInt(this.settings['file_upload_limit']-stats.successful_uploads) +"個文件";}function delDiv(mydiv) { mydiv.parentNode.removeChild(mydiv); //swfu參見iframe頁面中的swfu = new SWFUpload(settings); var stats = swfu.getStats(); stats.successful_uploads--; swfu.setStats(stats); var status = document.getElementById("divStatus"); status.innerHTML = "已上傳" + stats.successful_uploads + " 個文件,還可以上傳"+ parseInt(swfu.settings['file_upload_limit']-stats.successful_uploads) +"個文件";}可能是由於使用iframe的關係
delDiv函數里的swfu不能用this代替
整體效果如下圖：
當上傳完圖片後，再次修改信息時，需要取已經上傳了多少個圖片，結合到swfupload裡
通過php從後台取到已上傳的圖片路徑，通過smarty給到一個js數組裡
var img_arr = new Array();{if isset($img_arr)}{section name='img_arr' loop=$img_arr}img_arr[{$smarty.section.img_arr.index}] = new Array('{$img_arr[img_arr].images_s}','{$img_arr[img_arr].images_b}');{/section}{/if}查詢swfupload文檔得到如下資料
flashReady()
該事件函數是內部事件，因此不能被重寫。當SWFupload實例化，加載的FLASH完成所有初始化操作時觸發此事件。
提醒：對應設置中的自定義事件swfupload_loaded_handler
於是通過swfupload的settings裡設置swfupload_loaded_handler
swfupload_loaded_handler : loaded,
再在handlers.js定義loaded函數
function loaded() { if(img_arr.length != 0) { for( val in img_arr ) { addImageFromDb(img_arr[val][0],img_arr[val][1],this); } }}調用addImageFromDb函數修改已上傳的圖片數量並且生成已上傳的圖片的縮略圖
//初始化已經上傳過的圖片function addImageFromDb(src_s,src_b,swfu) { var stats = swfu.getStats(); stats.successful_uploads++; swfu.setStats(stats); var status = document.getElementById("divStatus"); status.innerHTML = "已上傳<font color='green'>" + stats.successful_uploads + "</font>張,還可以上傳<font color='red'>"+ parseInt(swfu.settings['file_upload_limit']-stats.successful_uploads) +"</font>張"; addImage(src_s,src_b);}更多關於JavaScript相關內容感興趣的讀者可查看本站專題：《JavaScript切換特效與技巧總結》、《JavaScript查找算法技巧總結》、《JavaScript動畫特效與技巧匯總》、《JavaScript錯誤與調試技巧總結》、《JavaScript數據結構與算法技巧總結》、《JavaScript遍曆算法與技巧總結》及《JavaScript數學運算用法總結》
希望本文所述對大家JavaScript程序設計有所幫助。