本文實(shí)例講述了SWFUpload多文件上傳及文件個(gè)數(shù)限制的方法。分享給大家供大家參考，具體如下：
SWFUpload是一個(gè)基于flash與JavaScript的客戶端文件上傳組件。
handlers.js文件
完成文件入列隊(duì)（fileQueued） →
完成選擇文件（fileDialogComplete） → 開始上傳文件（uploadStart） → 上傳處理（uploadProgress） → 上傳成功（uploadSuccess） → 上傳完成（uploadComplete） →
列隊(duì)完成（queueComplete）
如上所示，單選文件順序執(zhí)行以上回調(diào)函數(shù)，需要注意的是選擇多個(gè)文件，fileQueued、queueComplete只會(huì)執(zhí)行一次，而fileDialogComplet...→ uploadComplete每個(gè)文件都執(zhí)行一次。
參考官方例子完成基本功能后，仿趕集采用iframe的方式
為了實(shí)現(xiàn)縮略圖預(yù)覽 以及刪除 和上傳圖片個(gè)數(shù)的限制
顯示縮略圖，生成刪除縮略圖的按鈕，
thumbImages為父頁(yè)面顯示縮略圖的div
src_s為生成的縮略圖地址
src_b為原圖地址
serverData是圖片上傳處理頁(yè)面返回的數(shù)據(jù) 成功則以 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); }}關(guān)于剩余可上傳文件個(gè)數(shù)的處理
function queueComplete(numFilesUploaded) { this.setButtonDisabled(false); var stats = this.getStats(); var status = document.getElementById("divStatus"); status.innerHTML = "已上傳 " + stats.successful_uploads + " 個(gè)文件,還可以上傳"+ parseInt(this.settings['file_upload_limit']-stats.successful_uploads) +"個(gè)文件";}function delDiv(mydiv) { mydiv.parentNode.removeChild(mydiv); //swfu參見iframe頁(yè)面中的 swfu = new SWFUpload(settings); var stats = swfu.getStats(); stats.successful_uploads--; swfu.setStats(stats); var status = document.getElementById("divStatus"); status.innerHTML = "已上傳 " + stats.successful_uploads + " 個(gè)文件,還可以上傳"+ parseInt(swfu.settings['file_upload_limit']-stats.successful_uploads) +"個(gè)文件";}可能是由于使用iframe的關(guān)系
delDiv函數(shù)里的swfu不能用this代替
整體效果如下圖：
當(dāng)上傳完圖片后，再次修改信息時(shí)，需要取已經(jīng)上傳了多少個(gè)圖片，結(jié)合到swfupload里
通過(guò)php從后臺(tái)取到已上傳的圖片路徑，通過(guò)smarty給到一個(gè)js數(shù)組里
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()
該事件函數(shù)是內(nèi)部事件，因此不能被重寫。當(dāng)SWFupload實(shí)例化，加載的FLASH完成所有初始化操作時(shí)觸發(fā)此事件。
提醒：對(duì)應(yīng)設(shè)置中的自定義事件swfupload_loaded_handler
于是通過(guò)swfupload的settings里設(shè)置 swfupload_loaded_handler
swfupload_loaded_handler : loaded,
再在handlers.js定義loaded函數(shù)
function loaded() { if(img_arr.length != 0) { for( val in img_arr ) { addImageFromDb(img_arr[val][0],img_arr[val][1],this); } }}調(diào)用addImageFromDb函數(shù) 修改已上傳的圖片數(shù)量 并且生成已上傳的圖片的縮略圖
//初始化已經(jīng)上傳過(guò)的圖片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);}更多關(guān)于JavaScript相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《JavaScript切換特效與技巧總結(jié)》、《JavaScript查找算法技巧總結(jié)》、《JavaScript動(dòng)畫特效與技巧匯總》、《JavaScript錯(cuò)誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript數(shù)學(xué)運(yùn)算用法總結(jié)》
希望本文所述對(duì)大家JavaScript程序設(shè)計(jì)有所幫助。
新聞熱點(diǎn)
疑難解答
圖片精選
網(wǎng)友關(guān)注
