使用SWFUpload和fileupload简化多文件上传（附源码）

下载：在下面


一、使用方法如下
JavaScript部分：
1.引入两个js
2.在window.onload里面定义一个参数param
3.执行DjwlSWF.init(param,[fn])方法，回调函数可不写

<script type="text/javascript" src="/script/swfupload/swfupload.js"></script>
<script type="text/javascript" src="/script/swfupload/djwlswfupload.js"></script>
<script type="text/javascript">
window.onload = function () {
	//定义一个param参数
	var param = new Object();
	param.ele = document.getElementById("selectfiles");		//dom
	param.fileType = "*.gif;*.jpg";							//格式限制，中间用英文分号隔开
	param.fileCount = 0;									//文件个数限制，0表示不限
	param.fileSizeLimit = "200 KB";							//单个文件大小限制，单位KB
	
	param.paddingLeft = 18;
	param.paddingTop = 0;
	param.width = "160";
	param.height = "18";
	param.img = "/script/swfupload/images/SmallSpyGlassWithTransperancy_17x18.png";
	
	DjwlSWF.init(param, function(data){ 

		//每个文件上传完，会传回来上传后的路径，方便后续ajax操作
		var message = document.getElementById("message");
		if(message){
			message.innerHTML = message.innerHTML + '<img src="'+ data +'" width="50" height="50" />';
		}
	});
};
</script>

Html部分：
说明：其中有效部分是<span id="selectfiles">浏览</span>，外面包裹的部分是为了好看，做出一个按钮的形状

<div style="width: 160px; height: 18px; border: solid 1px #7FAAFF; background-color: #C5D9FF; padding: 2px;">
	<span id="selectfiles">浏览</span>
</div>

二、JavaScript代码




主要是这个js，其他java文件就是普通的fileupload上传，fileupload我也是刚看的，直接用的apache demo里面代码，限制文件大小什么的都还没有写

/**
 * DjwlSWF上传
 * @author huxiao [e-mail]
 */
var swfu;
var DjwlSWF = {
	djwl_upload_url : "/servlet/com.djwl.test.UploadServlet",
	djwl_size_limit : "200 KB",	// 单个文件的大小限制
	djwl_types : "*.jpg;*.gif;*.png;*.bmp",
	djwl_types_description : "文件类型",
	djwl_upload_limit : 0,
	djwlCallBackFun : "",
	
	/**
	 * 初始化
	 * @param {Object} swfu
	 * @author:huxiao [e-mail]
	 */
	init:function(param, fun){
		if(!param.ele){
			alert('DjwlSWF初始化出错');
			return null;
		}
		this.djwl_types = param.fileType || this.djwl_types;
		this.djwl_upload_limit = param.fileCount || this.djwl_upload_limit;
		this.djwl_size_limit = param.fileSizeLimit || this.djwl_upload_limit;
		this.djwlCallBackFun = fun || this.djwlCallBackFun;
		
		swfu = new SWFUpload({
			upload_url: DjwlSWF.djwl_upload_url,
			file_size_limit : DjwlSWF.djwl_size_limit,
			file_types : DjwlSWF.djwl_types,
			file_types_description : DjwlSWF.djwl_types_description,
			file_upload_limit : DjwlSWF.djwl_upload_limit,
		
			swfupload_preload_handler : DjwlHandle.preLoad,
			swfupload_load_failed_handler : DjwlHandle.loadFailed,
			file_queue_error_handler : DjwlHandle.fileQueueError,
			file_dialog_complete_handler : DjwlHandle.fileDialogComplete,
			upload_error_handler : DjwlHandle.uploadError,
			upload_success_handler : DjwlHandle.uploadSuccess,
			upload_complete_handler : DjwlHandle.uploadComplete,
		
			button_image_url : param.img || "",
			button_placeholder_id : param.ele.id,
			button_width: param.width || 66,
			button_height: param.height || 26,
			button_text : param.ele.innerHTML || "浏览",
			button_text_style : '.button { font-family: Helvetica, Arial, sans-serif; font-size: 12pt; } .buttonSmall { font-size: 10pt; }',
			button_text_top_padding: param.paddingTop || 0,
			button_text_left_padding: param.paddingLeft || 0,
			button_window_mode: SWFUpload.WINDOW_MODE.TRANSPARENT,
			button_cursor: SWFUpload.CURSOR.HAND,
			
			// Flash Settings
			flash_url : "/script/swfupload/swfupload.swf",
			flash9_url : "/script/swfupload/swfupload_fp9.swf",
		
			// A container where developers can place their own settings associated with this instance.
			custom_settings : {
				//upload_target : "divFileProgressContainer"
			},
			
			// Debug Settings
			debug: false
		});
	},
	
	djwlswfcallback:function(data){
		DjwlSWF.djwlCallBackFun(data);
	}
};


/**
 * DjwlHandle
 * @author copy of handlers.js
 */
var DjwlHandle = {
	preLoad:function() {
		if (!this.support.loading) {
			alert("You need the Flash Player 9.028 or above to use SWFUpload.");
			return false;
		}
	},
	loadFailed:function() {
		alert("Something went wrong while loading SWFUpload. If this were a real application we'd clean up and then give you an alternative");
	},
	fileQueueError:function(file, errorCode, message) {
		try {
			var imageName = "error.gif";
			var errorName = "";
			if (errorCode === SWFUpload.errorCode_QUEUE_LIMIT_EXCEEDED) {
				errorName = "You have attempted to queue too many files.";
			}
	
			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("/script/swfupload/images/" + imageName);
	
		} catch (ex) {
			this.debug(ex);
		}
	
	},

	fileDialogComplete:function(numFilesSelected, numFilesQueued) {
		try {
			if (numFilesQueued > 0) {
				this.startUpload();
			}
		} catch (ex) {
			this.debug(ex);
		}
	},

	uploadProgress:function(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) {
				progress.setStatus("Creating thumbnail...");
				progress.toggleCancel(false, this);
			} else {
				progress.setStatus("Uploading...");
				progress.toggleCancel(true, this);
			}
		} catch (ex) {
			this.debug(ex);
		}
	},

	uploadSuccess:function(file, serverData) {
		try {
			//addImage(serverData,50,50);
			DjwlSWF.djwlswfcallback(serverData);
		} catch (ex) {
			this.debug(ex);
		}
	},

	uploadComplete:function(file) {
		try {
			//  I want the next upload to continue automatically so I'll call startUpload here
			if (this.getStats().files_queued > 0) {
				this.startUpload();
			}
		} catch (ex) {
			this.debug(ex);
		}
	},

	uploadError:function(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("Cancelled");
					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("Stopped");
					progress.toggleCancel(true);
				}
				catch (ex2) {
					this.debug(ex2);
				}
			case SWFUpload.UPLOAD_ERROR.UPLOAD_LIMIT_EXCEEDED:
				imageName = "uploadlimit.gif";
				break;
			default:
				//alert(message);
				break;
			}
	
			//addImage("/script/swfupload/images/" + imageName);
	
		} catch (ex3) {
			this.debug(ex3);
		}
	
	}

	/*
	addImage:function(src, width, height) {
		var newImg = document.createElement("img");
		newImg.style.margin = "5px";
		if(width){
			newImg.width = width;
		}
		if(height){
			newImg.height = height;
		}
	
		document.getElementById("thumbnails").appendChild(newImg);
		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;
	},

	fadeIn:function(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);
		}
	}
	*/
};

评论

6 楼 511093965 2013-12-09  

你好，怎么下载的你的那个没有用啊？点击浏览没有反应，怎么回事呢？可以尽快回答我吗，很急

5 楼 郑智睿 2012-06-14  

关键是会话信息会丢失，这是个重大问题没解决

4 楼 郑智睿 2012-06-11  

里面的文件不完整

3 楼 青青雨露 2012-03-12  

不能运行啊

2 楼 formorange 2011-03-22  

就这里的路径问题：“/script”，去掉斜线即可。不过还有些调不通的。

1 楼 hunter123456 2010-05-19  

博主，文件解压后放到tomcat相关目录下，
不能正常运行啊，请问是什么原因啊，
我的浏览器是IE8,flash版本是10
提示DjwISWF未被定义。