`
ybhuxiao
  • 浏览: 192472 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

使用SWFUpload和fileupload简化多文件上传(附源码)

    博客分类:
  • java
阅读更多
下载:在下面


一、使用方法如下
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 kskr@qq.com
 */
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 kskr@qq.com
	 */
	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);
		}
	}
	*/
};




7
16
分享到:
评论
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未被定义。

相关推荐

    swfupload+fileupload文件批量上传,带进度条百分比显示

    - 它支持多文件选择,可以一次选择多个文件进行上传,提高了用户效率。 - 通过Flash提供了文件上传进度条,用户可以清晰地看到每个文件的上传状态,提升了用户体验。 2. **FileUpload组件**: - FileUpload通常...

    SwfUpload多文件上传演示版源码_swfuploaddemo.zip

    通过分析和学习SwfUpload多文件上传演示版源码,开发者不仅可以掌握SwfUpload的用法,还能了解到如何在实际项目中实现文件上传功能,提升Web应用的用户体验。同时,这也为其他富客户端组件的学习和应用提供了基础。

    jquery+swfupload+servlet_多文件上传,支持ctrl和shift多选择的功能

    本文将深入探讨如何使用jQuery、SWFUpload和Servlet技术实现一个支持多文件上传,同时具备Ctrl和Shift键多选功能的高效解决方案。 首先,jQuery是一个广泛使用的JavaScript库,它简化了DOM操作、事件处理、动画效果...

    SWFUpload+commons-fileupload 上传文件

    SWFUpload是一个JavaScript库,它提供了一种优雅的方式,允许用户通过Flash插件进行多文件上传,而无需刷新整个页面。另一方面,Apache Commons Fileupload是Java领域的一个强大的文件上传处理库,它可以方便地处理...

    基于swfupload 和extjs的多文件(跨域)文件上传(java)

    最近项目中要实现一个文件上传的功能...当前这个依托swfupload和ext 共同实现的文件上传,使用方便而且界面美观。希望对大家有帮助。谢谢,直接用eclipse导入发布到tomcat下运行即可.jdk1.6 大家可以到这个地址看效果 ...

    SwfUpload多文件上传演示版源码

    SWFUpload是一个客户端文件上传工具,最初由Vinterwebb.se开发,它通过整合Flash与JavaScript技术为WEB开发者提供了一个具有丰富功能继而超越传统标签的文件上传模式。 SWFUpload的主要特点  * 可以同时上传多个...

    swfupload多文件上传带进度条实例

    在这个实例中,我们将探讨如何在VS2012环境下,使用.NET Framework 4.0开发一个基于SWFUpload的多文件上传功能。 首先,让我们理解SWFUpload的工作原理。SWFUpload是基于Flash技术的,它创建了一个隐藏的Flash对象...

    多文件上传swfupload

    SwfUpload结合Java和Struts2框架,提供了一种高效、可定制的多文件上传解决方案。通过前端的SwfUpload配置和后端的Java处理,我们可以实现流畅的上传体验,同时保持对上传文件的有效控制。在实际项目中,还需要考虑...

    swfupload文件上传源码ASP

    这个"SWFUpload文件上传源码ASP"是针对ASP(Active Server Pages)开发的,旨在为ASP应用程序提供一个用户友好的多文件上传解决方案。下面将详细阐述SWFUpload的工作原理以及如何在ASP环境中集成和使用它。 1. **...

    swfupload+ajax实现多文件上传下载删除并将上传文件上传到数据库

    本教程将详细介绍如何利用`swfupload`和Ajax实现多文件上传、下载、删除,并将上传的文件信息存储到数据库。 首先,`swfupload`是一个开源的文件上传组件,它支持多文件选择、预览、进度条显示等功能。由于Flash在...

    SWFUpload多个超大文件上传

    总的来说,SWFUpload提供了一套强大而灵活的工具,使Web开发人员能够优雅地处理大文件上传和多文件批量上传,同时还支持传递额外的参数,增加了上传过程的灵活性。通过理解并正确应用这些概念和技术,我们可以构建出...

    swfupload asp版 asp上传大文件,批里上传

    在ASP环境中,SWFUpload 可以很好地解决传统ASP上传文件时遇到的大小限制和性能问题。 首先,我们要理解SWFUpload的工作原理。它利用了Adobe Flash技术来绕过浏览器对文件上传大小的限制,因为Flash插件允许上传更...

    [上传下载]SwfUpload多文件上传演示版源码_swfuploaddemo.zip源码ASP.NET网站源码打包下载

    [上传下载]SwfUpload多文件上传演示版源码_swfuploaddemo.zip源码ASP.NET网站源码打包下载[上传下载]SwfUpload多文件上传演示版源码_swfuploaddemo.zip源码ASP.NET网站源码打包下载[上传下载]SwfUpload多文件上传...

    SwfUpload 多文件上传

    SwfUpload 是一款开源的Flash上传组件,它允许用户在网页上实现多文件上传功能,尤其适用于需要大文件上传或批量上传的场景。这个技术在Web开发中被广泛应用,因为它可以提供比传统HTML表单上传更好的用户体验。...

    SwfUpload多文件上传

    综上所述,SwfUpload多文件上传与Struts1的结合使用,为Web应用提供了强大且用户友好的文件上传功能。通过理解并掌握上述知识点,开发者可以构建出高效、稳定且安全的文件上传系统。在实际项目中,还需要根据具体...

    SWFUpload大文件文件上传c#源码(整合flash)

    SWFUpload是一个客户端文件上传工具,最初由Vinterwebb.se开发,它通过整合Flash与JavaScript技术为WEB开发者提供了一个具有丰富功能继而超越传统标签的文件上传模式。 SWFUpload的主要特点  * 可以同时上传多个...

    Java源码的swfupload多文件上传 strut2demo

    本项目“Java源码的swfupload多文件上传 strut2demo”旨在演示如何在Struts2中集成swfupload插件,实现多文件上传的功能。swfupload是一个流行的JavaScript库,它允许用户在后台无刷新地上传多个文件,提高了用户...

    swfupload 大文件,多文件上传 ,选择和提交分开

    SWFUpload是一款经典的JavaScript与Flash结合的文件上传组件,它被广泛用于实现大文件和多文件的上传功能。这个组件的独特之处在于它允许用户在不刷新页面的情况下选择和上传文件,提高了用户体验。在这个特定的场景...

    SWFUpload多附件上传组件源码

    总之,SWFUpload是一个强大且灵活的多文件上传解决方案,其源码可以帮助开发者深入了解文件上传机制,并根据项目需求进行定制和优化。通过熟练掌握SWFUpload,开发者可以提升Web应用的文件上传功能,提供更好的用户...

Global site tag (gtag.js) - Google Analytics