Javascript使用SWFUpload進(jìn)行多文件上傳
更新時(shí)間：2016年11月16日 10:27:45 作者：KenshinCui
本篇文章主要解釋了使用SWFUpload進(jìn)行多文件上傳，這里整理了詳細(xì)的代碼，有需要的可以了解一下。
SWFUpload可以說(shuō)是目前最好的多文件上傳工具之一，雖然它是基于flash插件開(kāi)發(fā)的，但是相比目前很多js多文件上傳還是具有很多優(yōu)點(diǎn)：
- 可以同時(shí)選擇多個(gè)文件上傳（注意是以此選擇文件）
- 無(wú)刷新上傳
- 可以顯示進(jìn)度條
- 良好的瀏覽器兼容性
- 兼容其他js類(lèi)庫(kù)
SWFUpload另個(gè)優(yōu)點(diǎn)就是它優(yōu)秀的設(shè)計(jì)，它提供了一組簡(jiǎn)明的JavaScript事件，借助它們開(kāi)發(fā)者可以方便的在文件上傳過(guò)程中更新頁(yè)面的內(nèi)容。
下面是SWFUpload在具體使用過(guò)程中js代碼
MultiFileHandler.js
function fileQueueError(file, errorCode, message) {
try {
var imageName = "error.gif";
var errorName = "";
if (errorCode === SWFUpload.errorCode_QUEUE_LIMIT_EXCEEDED) {
errorName = "文件超過(guò)最大上傳個(gè)數(shù)！";
}
if (errorName !== "") {
alert(errorName);
return;
}
switch (errorCode) {
case SWFUpload.QUEUE_ERROR.ZERO_BYTE_FILE:
imageName = "zerobyte.gif";
break;
case SWFUpload.QUEUE_ERROR.FILE_EXCEEDS_SIZE_LIMIT:
imageName = "toobig.gif";
break;
case SWFUpload.QUEUE_ERROR.ZERO_BYTE_FILE:
case SWFUpload.QUEUE_ERROR.INVALID_FILETYPE:
default:
alert(message);
break;
}
addImage("/modules/commons/view/multifileupload/images/" + imageName);
} catch (ex) {
this.debug(ex);
}
}
function fileDialogComplete(numFilesSelected, numFilesQueued) {
try {
if (numFilesQueued > 0) {
this.startUpload();
}
} catch (ex) {
this.debug(ex);
}
}
function uploadProgress(file, bytesLoaded) {
try {
var percent = Math.ceil((bytesLoaded / file.size) * 100);
var progress = new FileProgress(file, this.customSettings.upload_target);
progress.setProgress(percent);
if (percent == 100) {
if(showThumbnail){
progress.setStatus("正在創(chuàng)建縮略圖...");
}
progress.toggleCancel(false, this);
uploadNum++;
setUploadNumber(uploadNum);
} else {
progress.setStatus("正在上傳中，已完成"+percent+"%");
progress.toggleCancel(true, this);
}
} catch (ex) {
this.debug(ex);
}
}
//文件數(shù)據(jù)發(fā)送成功，不管是否成功保存;其serverData是否服務(wù)器端處理完以后的返回值
//這里規(guī)定返回值必須為success才代表成功
var serverErrorInfo="";
function uploadSuccess(file, serverData) {
try {
var sd=serverData.replace(/ /gi,'').replace(/ /gi,'').replace(/\r/gi,'').replace(/\n/gi,'').replace(/\t/gi,'');
if(showThumbnail){
var filePath="..";
if(savePath!=''){
filePath=filePath+"/"+savePath;
}
filePath=filePath+'/'+file.name;
addImage(filePath);
}
var progress = new FileProgress(file, this.customSettings.upload_target);
if(showThumbnail){
progress.setStatus("縮略圖創(chuàng)建完成！");
}
if(sd!=''){
if(sd!='success'){
if(serverErrorInfo!=''){
serverErrorInfo+='<br />';
}
serverErrorInfo+=sd;
document.getElementById('divError').innerHTML=serverErrorInfo;
}
}
progress.toggleCancel(false);
} catch (ex) {
this.debug(ex);
}
}
//服務(wù)器端返回非空值才認(rèn)為上傳成功，觸發(fā)下面事件
function uploadComplete(file) {
try {
/* I want the next upload to continue automatically so I'll call startUpload here */
if (this.getStats().files_queued > 0) {
this.startUpload();
} else {
var progress = new FileProgress(file, this.customSettings.upload_target);
progress.setComplete();
if(!isCancel){
progress.setStatus("文件上傳成功！");
}else{
progress.setStatus("上傳已取消！");
isCancel=false;
}
progress.toggleCancel(false);
}
} catch (ex) {
this.debug(ex);
}
}
function uploadError(file, errorCode, message) {
var imageName = "error.gif";
var progress;
try {
switch (errorCode) {
case SWFUpload.UPLOAD_ERROR.FILE_CANCELLED:
try {
progress = new FileProgress(file, this.customSettings.upload_target);
progress.setCancelled();
progress.setStatus("取消完成！");
progress.toggleCancel(false);
}
catch (ex1) {
this.debug(ex1);
}
break;
case SWFUpload.UPLOAD_ERROR.UPLOAD_STOPPED:
try {
progress = new FileProgress(file, this.customSettings.upload_target);
progress.setCancelled();
progress.setStatus("已停止！");
progress.toggleCancel(true);
}
catch (ex2) {
this.debug(ex2);
}
case SWFUpload.UPLOAD_ERROR.UPLOAD_LIMIT_EXCEEDED:
imageName = "uploadlimit.gif";
break;
default:
alert(message);
break;
}
addImage("/modules/commons/view/multifileupload/images/" + imageName);
} catch (ex3) {
this.debug(ex3);
}
}
function addImage(src) {
var imageName=getFileName(src);
var divImage=document.createElement("span");
divImage.style.margin = "5px";
divImage.style.padding = "1px";
divImage.style.width = "59px";
divImage.style.height = "85px";
divImage.style.display="block";
divImage.style.border="10px";
divImage.style.float="left";
divImage.attachEvent("onmouseover", setBackground(divImage,"#FFFACD"));
divImage.attachEvent("onmouseout", setBackground(divImage,"#FFFFFF"));
var newImg = document.createElement("img");
//newImg.style.margin = "5px";
newImg.style.width = "59px";
newImg.style.height = "59px";
newImg.alt=imageName;
var divImageName=document.createElement("div");
divImageName.style.marginTop="5px";
divImageName.style.width="59px";
divImageName.style.height="20px";
divImageName.style.textAlign="center";
divImageName.innerHTML=imageName;
divImage.appendChild(newImg);
divImage.appendChild(divImageName);
document.getElementById("thumbnails").appendChild(divImage);
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;
}
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);
}
}
var isCancel=false;//是否取消上傳
var uploadNum=0;//已成功上傳文件
cancelUpload=function(){
document.getElementById('imgCancelButton').style.visible='hidden';
swfu.cancelUpload();
/*var fileProgressID = "divFileProgress";
var fileProgressWrapper = document.getElementById(fileProgressID);
var fileProgressElement = fileProgressWrapper.firstChild;
fileProgressElement.childNodes[2].innerHTML = '上傳已停止！';*/
isCancel=true;
}
setUploadNumber=function(num){
document.getElementById("lgdUploadNumber").innerHTML="文件上傳(已上傳<span id='spNumber'>"+num+"</span>個(gè)文件)";
}
getFileName=function(filePath){
var i=0;
if(filePath.indexOf('/')==-1){
i=filePath.lastIndexOf('\\');
}else{
i=filePath.lastIndexOf('/');
}
var j=filePath.lastIndexOf('.');
var fileName=filePath.substring(i+1,j);
return fileName;
}
setBackground=function(obj,color){
return function(){
setBackgroundWithParams(obj,color);
}
}
setBackgroundWithParams=function(obj,color){
obj.style.backgroundColor=color;
obj.style.border="1px";
obj.style.borderColor="red";
}
/* ******************************************
* FileProgress Object
* Control object for displaying file info
* ****************************************** */
function FileProgress(file, targetID) {
this.fileProgressID = "divFileProgress";
this.fileProgressWrapper = document.getElementById(this.fileProgressID);
if (!this.fileProgressWrapper) {
this.fileProgressWrapper = document.createElement("div");
this.fileProgressWrapper.className = "progressWrapper";
this.fileProgressWrapper.id = this.fileProgressID;
this.fileProgressElement = document.createElement("div");
this.fileProgressElement.className = "progressContainer";
var progressCancel = document.createElement("a");
progressCancel.className = "progressCancel";
progressCancel.href = "#";
progressCancel.id = "imgCancelButton";
progressCancel.attachEvent("onclick", cancelUpload);
progressCancel.style.visibility = "hidden";
progressCancel.appendChild(document.createTextNode(" "));
var progressText = document.createElement("div");
progressText.className = "progressName";
progressText.appendChild(document.createTextNode(file.name));
var progressBar = document.createElement("div");
progressBar.className = "progressBarInProgress";
var progressStatus = document.createElement("div");
progressStatus.className = "progressBarStatus";
progressStatus.innerHTML = " ";
this.fileProgressElement.appendChild(progressCancel);
this.fileProgressElement.appendChild(progressText);
this.fileProgressElement.appendChild(progressStatus);
this.fileProgressElement.appendChild(progressBar);
this.fileProgressWrapper.appendChild(this.fileProgressElement);
document.getElementById(targetID).appendChild(this.fileProgressWrapper);
fadeIn(this.fileProgressWrapper, 0);
} else {
this.fileProgressElement = this.fileProgressWrapper.firstChild;
this.fileProgressElement.childNodes[1].firstChild.nodeValue = file.name;
}
this.height = this.fileProgressWrapper.offsetHeight;
}
FileProgress.prototype.setProgress = function (percentage) {
this.fileProgressElement.className = "progressContainer green";
this.fileProgressElement.childNodes[3].className = "progressBarInProgress";
this.fileProgressElement.childNodes[3].style.width = percentage + "%";
};
FileProgress.prototype.setComplete = function () {
this.fileProgressElement.className = "progressContainer blue";
this.fileProgressElement.childNodes[3].className = "progressBarComplete";
this.fileProgressElement.childNodes[3].style.width = "";
};
FileProgress.prototype.setError = function () {
this.fileProgressElement.className = "progressContainer red";
this.fileProgressElement.childNodes[3].className = "progressBarError";
this.fileProgressElement.childNodes[3].style.width = "";
};
FileProgress.prototype.setCancelled = function () {
this.fileProgressElement.className = "progressContainer";
this.fileProgressElement.childNodes[3].className = "progressBarError";
this.fileProgressElement.childNodes[3].style.width = "";
};
FileProgress.prototype.setStatus = function (status) {
this.fileProgressElement.childNodes[2].innerHTML = status;
};
FileProgress.prototype.toggleCancel = function (show, swfuploadInstance) {
this.fileProgressElement.childNodes[0].style.visibility = show ? "visible" : "hidden";
if (swfuploadInstance) {
var fileID = this.fileProgressID;
this.fileProgressElement.childNodes[0].onclick = function () {
swfuploadInstance.cancelUpload(fileID);
return false;
};
}
};
MultiFileUpload.js
var uploadUrl='$!{request.uploadUrl}';//上傳處理的url
var savePath='$!{request.savePath}';
var fileType='$!{request.fileType}';
//var postName='$request.postName';
var sizeLimit='$!{request.sizeLimit}';
var uploadLimit='$!{request.uploadLimit}';
//var buttonWidth='$!{request.buttonWidth}';
//var buttonHeight='$!{request.buttonHeight}';
var buttonText='$!{request.buttonText}';
var buttonAlign='$!{request.buttonAlign}';
var componentHeight='$!{request.componentHeight}';
var showThumbnail='$!{request.showThumbnail}'; //是否顯示縮略圖，一般用于圖片上傳，默認(rèn)為false
var thumbnailScroll='$!{request.thumbnailScroll}';//縮略圖部分是否顯示滾動(dòng)條
if(uploadUrl==''){
//uploadUrl='/Commons/fileUpload.do';
uploadUrl='/commons/paste.do?template=/multifileupload/data/upload.htm';
}
//if(postName=''){
// postName= "Filedata";
//}
if(fileType==''){
fileType='*.*';
}
if(uploadLimit==''){
uploadLimit=0;
}
//if(buttonWidth==''){
// buttonWidth=100;
//}
//if(buttonHeight==''){
// buttonHeight=22;
//}
if(buttonText==''){
buttonText='選 擇 文 件';
}
if(buttonAlign==''){
buttonAlign='left';
}
if(showThumbnail==''){
showThumbnail=false;
}else{
showThumbnail=true;
}
if(thumbnailScroll==''){
thumbnailScroll=false;
}else{
thumbnailScroll=true;
}
if(uploadUrl.indexOf('?')!=-1){
uploadUrl=uploadUrl+'&savePath='+encodeURIComponent(savePath);
}else{
uploadUrl=uploadUrl+'?savePath='+encodeURIComponent(savePath);
}
var swfu;
window.onload = function () {
swfu = new SWFUpload({
upload_url: uploadUrl,
file_size_limit : sizeLimit,
file_types : fileType,
//file_types_description : "JPG Images",
file_upload_limit : uploadLimit, // Zero means unlimited
file_queue_error_handler : fileQueueError,
file_dialog_complete_handler : fileDialogComplete,
upload_progress_handler : uploadProgress,
upload_error_handler : uploadError,
upload_success_handler : uploadSuccess,
upload_complete_handler : uploadComplete,
button_image_url : "/modules/commons/view/multifileupload/images/XPButtonNoText_160x22.png",
button_placeholder_id : "spanButtonPlaceholder",
button_width: 101,
button_height: 22,
button_text : buttonText,
button_text_style : '.button { font-family: 華文行楷,宋體, Arial, sans-serif; font-size: 14pt; } .buttonSmall { font-size: 10pt; }',
button_text_top_padding: 1,
button_text_left_padding: 20,
flash_url : "/modules/commons/js/swfupload/swfupload.swf",
custom_settings : {
upload_target : "divFileProgressContainer"
},
debug: false
});
if(thumbnailScroll){
var divThumbnails=document.getElementById("thumbnails");
var divContent=document.getElementById("content");
divContent.style.width="400px";
divThumbnails.style.height='200px';
divThumbnails.style.overflowY="scroll";
divThumbnails.style.border="solid 1px #DDF0DD";
}
document.getElementById("divButtonPlaceholder").style.textAlign=buttonAlign;
if(componentHeight!=''){
componentHeight=componentHeight.replace("px","");
componentHeight=Number(componentHeight)-25;//去掉空隙和按鈕高度
document.getElementById("fsProgress").style.height=componentHeight+"px";
}
}
其中MultiFileHandler.js是對(duì)于上傳過(guò)程中各個(gè)事件的處理，MultiFileUpload.js是SWFUpload的使用，"$"符號(hào)開(kāi)頭的變量在實(shí)際使用過(guò)程中可以自由定制，另外在此還要提醒大家，。代碼中的savePath變量是文件最后的保存路徑，后臺(tái)只要讀取此變量保存到相應(yīng)的位置即可。下面是后臺(tái)代碼：
using System;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
namespace WebApplication1
{
public partial class FileUpload : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
string path="";
HttpPostedFile file= Request.Files["FileData"];
string relationPath=Request["savePath"];
if(relationPath!=string.Empty)
{
path=Server.MapPath("~/")+relationPath+"\\"+file.FileName;
}
file.SaveAs(path);
Response.Write("success");
}
}
}
需要注意的是在后臺(tái)一定要給出返回值（例如上面代碼中Response.Write("success")）否則SWFUpload就不認(rèn)為是上傳完成。
下面的實(shí)際效果：
原文鏈接：http://blog.csdn.net/jianxin160/article/details/7029207
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
本文主要介紹了分別使用javascript，jquery，css實(shí)現(xiàn)瀑布流布局的方法。具有很好的參考價(jià)值，下面跟著小編一起來(lái)看下吧2017-02-02
這篇文章主要介紹了JS模板編譯的實(shí)現(xiàn)詳情，編譯是一種格式變成另一種格式的過(guò)程。編譯會(huì)導(dǎo)致好的結(jié)果，比如書(shū)寫(xiě)簡(jiǎn)單的代碼，編譯出來(lái)復(fù)雜的代碼；或者提高代碼的使用性能2022-07-07
可以用來(lái)調(diào)試JavaScript錯(cuò)誤的解決方案
我們?cè)跁?shū)寫(xiě)js的過(guò)程中，經(jīng)常會(huì)出現(xiàn)一些js錯(cuò)誤，對(duì)于如果找出錯(cuò)誤的解決方法就是關(guān)鍵，下面的文章就是相關(guān)的調(diào)試方法。2010-08-08
微信小程序 輪播圖實(shí)現(xiàn)原理及優(yōu)化詳解
這篇文章主要介紹了微信小程序 輪播圖實(shí)現(xiàn)原理及優(yōu)化詳解,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-09-09
本文將介紹一下Js獲取Gridview選中行的內(nèi)容的過(guò)程及步驟:取得gridview中獲取選中行指定列的值.獲取鼠標(biāo)點(diǎn)擊的元素等等，感興趣的朋友可以了解下，或許對(duì)你學(xué)習(xí)js方面知識(shí)有所幫助2013-02-02
微信小程序?qū)崿F(xiàn)點(diǎn)擊按鈕修改文字大小功能【附demo源碼下載】
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)點(diǎn)擊按鈕修改文字大小功能,涉及微信小程序事件綁定及setData動(dòng)態(tài)修改Page頁(yè)面data數(shù)據(jù),進(jìn)而控制頁(yè)面元素屬性動(dòng)態(tài)改變的相關(guān)操作技巧,需要的朋友可以參考下2017-12-12
這篇文章主要為大家詳細(xì)介紹了原生js實(shí)現(xiàn)九宮格拖拽換位，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-01-01
JS前端面試必備——基本排序算法原理與實(shí)現(xiàn)方法詳解【插入/選擇/歸并/冒泡/快速排序】
這篇文章主要介紹了JS前端面試基本排序算法原理與實(shí)現(xiàn)方法,結(jié)合實(shí)例形式詳細(xì)分析了JS常見(jiàn)的基本排序算法相關(guān)原理、實(shí)現(xiàn)方法、時(shí)間復(fù)雜度及操作注意事項(xiàng),需要的朋友可以參考下2020-02-02
javascript自定義in_array()函數(shù)實(shí)現(xiàn)方法
這篇文章主要介紹了javascript自定義in_array()函數(shù)實(shí)現(xiàn)方法,涉及javascript數(shù)組的遍歷與查找相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-08-08
最簡(jiǎn)單的JavaScript圖片輪播代碼(兩種方法)
基于javascript代碼實(shí)現(xiàn)最簡(jiǎn)單的圖片輪播效果，非常簡(jiǎn)單，本文通過(guò)兩種方式給大家介紹最簡(jiǎn)單的圖片輪播，感興趣的朋友一起學(xué)習(xí)吧2015-12-12