本文實(shí)例講述了SWFUpload多文件上傳及文件個(gè)數(shù)限制的方法。分享給大家供大家參考，具體如下：
SWFUpload是一個(gè)基于flash與JavaScript的客戶(hù)端文件上傳組件。
handlers.js文件
完成文件入列隊(duì)（fileQueued） →
完成選擇文件（fileDialogComplete） → 開(kāi)始上傳文件（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參見(jiàn)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}
查詢(xún)swfupload文檔得到如下資料
flashReady()
該事件函數(shù)是內(nèi)部事件，因此不能被重寫(xiě)。當(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);
}
希望本文所述對(duì)大家JavaScript程序設(shè)計(jì)有所幫助。