`
stephen830
  • 浏览: 3010154 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

step-by-step多文件WEB批量上传(swfupload)的完美解决方案

    博客分类：
  • java
WebFlashIEJSPFirefox 
阅读更多
★★★ 本篇为原创，需要引用转载的朋友请注明：《 http://stephen830.iteye.com/blog/255583 》 谢谢支持！ ★★★

功能完全支持ie和firefox浏览器！同样也支持safari浏览器！

一般的WEB方式文件上传只能一个一个的进行上传，在某些应用上就显得很不人性化，客户们都希望能够1次选择很多文件，然后让系统把选择的文件全部上传。

这里，就将针对这个问题提出一个比较完美的解决方案，利用的技术主要有2个：Flash 和 smartupload。Flash 能够让客户一次选择多个文件，而smartupload负责将选择的文件上传到服务器上。

有些朋友看到这里，就知道了，其实就是swfupload方法，具体信息可以访问swfupload官方网站：http://www.swfupload.org/

让我们先来看看客户端的界面效果图。（多选文件，批量上传，上传进度显示）



要做到图中的效果，其实很方便，看完下面的描述，相信大家都可以实现上图中的效果了。
说明：swfupload2中通过一个png图片与flash插件进行关联，可以修改images下的png图片来（如上图中的[选择文件]图片）自定义显示自己想要的图片样子（不要修改图片名字和格式）。

如果你用的不是java环境，不要紧，只要稍作修改，同样可以使用在其他的环境中。

第1步，要进行下面的过程，必须先准备好Flash插件和smartupload。
Flash插件:相信大家的浏览器早已经安装过了，请检查版本，尽量使用最新的的flash插件。

smartupload:大家可以去看看我的另一篇文章 [上传下载组件SmartUpload使用方法] http://stephen830.iteye.com/blog/255010 里面详细讲述了使用方法，并且提供了具体java类的下载。请先熟悉smartupload，然后再开始下面的步骤。

第2步，前台部分准备客户操作的WEB界面，如下[UploadFileExample.jsp、UploadFileExampleSubmit.jsp]


（关于参数 upload_url: "<%=uploadUrl.toString()%>",
要注意提交文件路径，最好用http://.../UploadFileExample.jsp格式的完整路径，即像我例子中写的那样）

UploadFileExample.jsp 
<%@ page contentType="text/html;charset=UTF-8"%>
<%
    double perMaxSize = 1.5;//单个文件允许的max大小
    String sizeUnit = "MB";//perMaxSize数据对应的单位
    String ext = "*.jpg;*.jpeg;*.gif";//允许上传的文件类型
    //文件上传提交的目标页面
	StringBuffer uploadUrl = new StringBuffer("http://");
	uploadUrl.append(request.getHeader("Host"));
	uploadUrl.append(request.getContextPath());
	uploadUrl.append("/admin/swfuploadexample/UploadFileExampleSubmit.jsp");
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>批量相片上传</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link href="css/default.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/swfupload.js"></script>
<script type="text/javascript" src="js/swfupload.swfobject.js"></script>
<script type="text/javascript" src="js/swfupload.queue.js"></script>
<script type="text/javascript" src="js/fileprogress.js"></script>
<script type="text/javascript" src="js/handlers.js"></script>

<script type="text/javascript">
var swfu;

SWFUpload.onload = function () {
	var settings = {
		flash_url : "js/swfupload.swf",
		upload_url: "<%=uploadUrl.toString()%>",
		post_params: {
			"user_id" : "stephen830",
			"pass_id" : "123456"
		},
		file_size_limit : "<%=perMaxSize%> <%=sizeUnit%>",
		file_types : "<%=ext%>",
		file_types_description : "<%=ext%>",
		file_upload_limit : 100,
		file_queue_limit : 0,
		custom_settings : {
			progressTarget : "fsUploadProgress",
			cancelButtonId : "btnCancel",
			uploadButtonId : "btnUpload",
			myFileListTarget : "idFileList"
		},
		debug: false,
		auto_upload:false,

		// Button Settings
		button_image_url : "images/XPButtonUploadText_61x22.png",	// Relative to the SWF file
		button_placeholder_id : "spanButtonPlaceholder",
		button_width: 61,
		button_height: 22,

		// The event handler functions are defined in handlers.js
		swfupload_loaded_handler : swfUploadLoaded,
		file_queued_handler : fileQueued,
		file_queue_error_handler : fileQueueError,
		file_dialog_complete_handler : fileDialogComplete,
		upload_start_handler : uploadStart,
		upload_progress_handler : uploadProgress,
		upload_error_handler : uploadError,
		upload_success_handler : uploadSuccess,
		upload_complete_handler : uploadComplete,
		queue_complete_handler : queueComplete,	// Queue plugin event
		
		// SWFObject settings
		minimum_flash_version : "9.0.28",
		swfupload_pre_load_handler : swfUploadPreLoad,
		swfupload_load_failed_handler : swfUploadLoadFailed
	};

	swfu = new SWFUpload(settings);
}

</script>
</head>
<body bgcolor="#FCFCFC" topmargin="0px" leftmargin="10px" rightmargin="10px" scroll="yes">
<table width="100%" cellspacing="4" cellpadding="4" border="0" bgcolor="#FCFCFC">
	<tr> 
	<td class="DH1">
	<table width="100%" cellspacing="4" cellpadding="4" border="0" bgcolor="#FCFCFC">
	<tr>
	<td class="DH2">
	<STRONG>批量上传相片 （支持的相片类型：<%=ext%>；单个相片最大不能超过：<%=perMaxSize%> <%=sizeUnit%>）</STRONG> 
	</td><td class="DH2" align="right"></td>
	</tr>
	</table>
<div id="content">
	<form id="form1" action="UploadFileExampleSubmit.jsp" method="post" enctype="multipart/form-data">
		<table width="90%" cellspacing="0" cellpadding="0" border="0"><tr><td>
		<span id="spanButtonPlaceholder"></span>
		<input id="btnUpload" type="button" value="上传相片" class="btn" />
		<input id="btnCancel" type="button" value="取消全部上传" disabled="disabled" class="btn" /></td>
		</tr></table>
		<table id="idFileList" class="uploadFileList"><tr class="uploadTitle"><td><B>文件名</B></td><td><B>文件大小</B></td><td width=100px><B>状态</B></td><td width=35px>&nbsp;</td></tr></table>
		等待上传 <span id="idFileListCount">0</span> 个 ，成功上传 <span id="idFileListSuccessUploadCount">0</span> 个
		<div id="divSWFUploadUI" style="visibility: hidden;"></div>
		<noscript style="display: block; margin: 10px 25px; padding: 10px 15px;">
			很抱歉，相片上传界面无法载入，请将浏览器设置成支持JavaScript。
		</noscript>
		<div id="divLoadingContent" class="content" style="background-color: #FFFF66; border-top: solid 4px #FF9966; border-bottom: solid 4px #FF9966; margin: 10px 25px; padding: 10px 15px; display: none;">
			相片上传界面正在载入，请稍后...
		</div>
		<div id="divLongLoading" class="content" style="background-color: #FFFF66; border-top: solid 4px #FF9966; border-bottom: solid 4px #FF9966; margin: 10px 25px; padding: 10px 15px; display: none;">
			相片上传界面载入失败，请确保浏览器已经开启对JavaScript的支持，并且已经安装可以工作的Flash插件版本。
		</div>
		<div id="divAlternateContent" class="content" style="background-color: #FFFF66; border-top: solid 4px #FF9966; border-bottom: solid 4px #FF9966; margin: 10px 25px; padding: 10px 15px; display: none;">
			很抱歉，相片上传界面无法载入，请安装或者升级您的Flash插件。
			请访问： <a href="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash" target="_blank">Adobe网站</a> 获取最新的Flash插件。
		</div>
	</form>
</div>
</td></tr></table>
</body>
</html>




UploadFileExample.jsp对应的处理页面 --> UploadFileExampleSubmit.jsp

(1)请确保已经看完我的另一篇文章（上传下载组件SmartUpload使用方法 http://stephen830.iteye.com/admin/blogs/255010），先搞好这个才能开始下面的操作
(2)写一个对应上传方法类，com.soft4j.bo.PhotoMgr.java，其中的方法就是文章下面提到的public static String fileUpload(SmartUpload su,PageContext pageContext) throws Exception {...}

这2点弄好了,ok，可以继续。（如果没有准备java文件，下面的UploadFileExampleSubmit.jsp会报错）

注意在（UploadFileExampleSubmit.jsp）中：上传成功后必须返回“successed”，失败的话则返回失败的原因。 

<%@ page contentType="text/html;charset=UTF-8"%><%@ page import="com.soft4j.httpupload4j.SmartUpload"%><%@ page import="com.soft4j.bo.PhotoMgr"%><%
	String pageErrorInfo = null;
	SmartUpload su = null;
	try{
		su = new SmartUpload();
		su.initialize(pageContext);
		su.upload();
		pageErrorInfo = PhotoMgr.fileUpload(su,pageContext);
		if(pageErrorInfo==null){
			out.print("successed");
		}
	}catch(Exception e){
		pageErrorInfo = e.getMessage();
	}finally{
		su = null;
		if(pageErrorInfo!=null){
			out.print(pageErrorInfo);
		}
	}
%>


第3步 准备后台的文件上传功能。也就是上面文件[UploadFileExampleSubmit.jsp]中用到的[PhotoMgr.fileUpload(su,pageContext)]方法。 

/**
	 * 文件上传方法.
	 * @param su
	 * @param pageContext
	 * @return
	 * @throws Exception
	 */
	public static String fileUpload(SmartUpload su,PageContext pageContext) throws Exception {
	    com.soft4j.httpupload4j.File suFile = null;
	    int fileCount = 0;
	    try {
	    	//获取传递过来的参数
	    	String userId = su.getRequest().getParameter("user_id");
	    	String passId = su.getRequest().getParameter("pass_id");

	        String fileExt = "";
	        int fileSize = 0;
	        String AllowedExtensions = ",jpg,jpeg,gif,";//允许上传的文件类型
	        double maxFileSize = 1.5*1024;//单文件最大大小，单位KB
	        //校验文件类型和大小
	        for (int i=0; i<su.getFiles().getCount();i++) {
	            suFile = su.getFiles().getFile(i);
	            if (suFile.isMissing())
	                continue;
	            //校验文件大小
	            fileSize = suFile.getSize()/1024;//字节转换成KB
	            if(fileSize==0) fileSize=1;
	            if(maxFileSize<fileSize) throw new Exception("单个上传相片的容量不能超过["+maxFileSize+"KB]");
	
	            //校验文件类型
	            if (suFile.getFileExt() == null
	                    || "".equals(suFile.getFileExt())) {
	                fileExt = ",,";
	            } else {
	                fileExt = "," + suFile.getFileExt().toLowerCase() + ",";
	            }
	            if (!"".equals(AllowedExtensions)
	                    && AllowedExtensions.indexOf(fileExt) == -1) {
	                throw new Exception("您上传的文件[" + suFile.getFileName()
	                        + "]的类型为系统禁止上传的文件类型，不能上传！");
	            }
	            fileCount++;
	        }
	        if (fileCount==0) throw new Exception("请选择上传的文件");
	        //准备保存文件
	        String filePath="D:\\tomcat\\webapps\\test\\photo\\";//这里填写项目中存放上传文件的物理路径
	        for (int i=0; i<su.getFiles().getCount();i++) {
	            suFile = su.getFiles().getFile(i);
	            suFile.saveAs(filePath+suFile.getFileName(),SmartUpload.SAVE_PHYSICAL);//保存文件
	        }
	        //成功返回null
	        return null;
	    } finally {
	    	//
	    }
	}


备注：关于jsp页面和java方法我不做过多的说明了，应该已经比较清楚了。

本文自发布后，受到了很多朋友的关注，也为不少的朋友提供了帮助，我很高兴。
下面将朋友们遇到的一些问题作汇总后需要注意的一些地方列了出来：

<1> 功能实现需要flash插件支持。
flash版本为 flash 9.0.124 或者 flash 10.0.12.36 版本（这是最新的flash10插件）. 如果不是的话，可以去flash官网 http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash 进行在线安装。


<2> UploadFileExample.jsp 中的 upload_url参数设置。
参数需要使用 http://....../UploadFileExampleSubmit.jsp 这样的完整路径.

<3> 关于获取参数 post_params中的参数值。
post_params: {"user_id" : "stephen830","pass_id" : "123456"} 中的参数，不能使用普通的request.getParameter("")方法来获取，
而必须用你的上传方法对应的特定方法来获取，比如，我这里用smartupload，则获取方法就是String userId = su.getRequest().getParameter("user_id");

<4> 上传后不管成功还是失败，都需要有返回值。
这个返回值将传递到对应js中。返回值在UploadFileExampleSubmit.jsp中设置，成功则 out.print("successed"); 失败则 out.print(pageErrorInfo);//pageErrorInfo为错误信息。

该返回值将传递给js目录下的handlers.js文件，具体的方法是 function uploadSuccess(file, serverData) {...} 。

有些朋友的上传成功后out.print("successed"); 发现js收到的"successed"前面会有隐藏字符，遇到这种情况可以更改function uploadSuccess(file, serverData) {...} 中的
var isSuccess = (serverData.indexOf("successed")==0?true:false);
改为
var isSuccess = (serverData.indexOf("successed")>-1?true:false);
就可以了。

<5> 附件中增加一个完整的测试功能例子。
附件名 PROJECT_swfupload.zip 下载 http://stephen830.iteye.com/upload/attachment/53105/e0e90839-a760-3adb-acdd-aa3b972d090c.zip


附录：swfupload 文件批量上传压缩包 swfupload.zip（支持最新的flash10插件） （附件中没有java类，请自己准备1个java类，将上面的方法复制进去）

为方便了解和调试功能，在附件中增加了一个完整的工程Example，附件名（PROJECT_swfupload.zip），大家可以直接使用来测试功能。

最后感谢朋友 flyfan，taiwei 对本篇的建议！
-------------------------------------------------------------
分享知识 分享快乐,分享知识，分享快乐，希望文章能给需要的朋友带来小小的帮助。
  • 大小: 18.5 KB
64
顶
4
踩
分享到：
| java生成条形码
评论
153 楼 qinguolong 2014-09-19  
请教下，现在有这样一个需求：批量上传时，需要控制此次上传文件总量（已上传成功的+等待上传的）大小为：20MB；该如何控制呢？假如我一次选择了30个文件，但是到了第21个文件的时候，就超出了20MB，需要将：等待上传 个数调整为20，如何调整这个个数，共2个问题，希望您能帮忙解答下，谢谢。
152 楼 flamesea 2013-10-15  
非常感谢，可以用。
另外报告一个bug：就是设置文件上传尺寸那边，作者给的样例是“1.5MB”，但是实际测试发现上传1.04MB的图片会报尺寸超过问题。
而后反编译swf文件发现：SWFUpload.as中的代码有问题，如下：
（反编译后变量名丢失了，勿怪）

        private function SetFileSizeLimit(param1:String) : void
        {
            var _loc_2:Number;
            var _loc_3:String;
            var _loc_4:* = /^\s*|\s*$/;
            param1 = param1.toLowerCase();
            param1 = param1.replace(_loc_4, "");
            var _loc_5:* = param1.match(/^\d+/);

就是这一句错了，这样只能匹配出整数部分，而不能匹配出小数部分


            if (param1.match(/^\d+/) !== null && _loc_5.length > 0)
            {
                _loc_2 = parseInt(_loc_5[0]);
这里就一样取错了
            }// end if
            if (isNaN(_loc_2) || _loc_2 < 0)
            {
                _loc_2 = 0;
            }// end if
            var _loc_6:* = param1.match(/(b|kb|mb|gb)/);
            if (param1.match(/(b|kb|mb|gb)/) != null && _loc_6.length > 0)
            {
                _loc_3 = _loc_6[0];
            }// end if
            var _loc_7:Number;
            if (_loc_3 === "b")
            {
                _loc_7 = 1;
            }
            else if (_loc_3 === "mb")
            {
                _loc_7 = 1048576;
            }
            else if (_loc_3 === "gb")
            {
                _loc_7 = 1073741824;
            }// end else if
            this.fileSizeLimit = _loc_2 * _loc_7;
            return;
        }
151 楼 yi303526230 2013-07-22  
（关于参数 upload_url: "<%=uploadUrl.toString()%>",
要注意提交文件路径，最好用http://.../UploadFileExample.jsp格式的完整路径，即像我例子中写的那样）
楼主说的这个有问题，本人遇到点击上传后，文件并不会上传，一直卡在那里，我改成用相对地址后就不会出现这种问题，当然，出现这个问题是在正式环境，本地跑的话就不会出现。
150 楼 tboy 2013-07-15  
调了半天也没弄好，麻烦哪位高手发个整套的例子程序到我邮箱：2369816086@qq.com 谢谢。。
149 楼 ningvsban 2012-11-24  
我的页面显示出现中文乱码（文件名和文件大小都正常显示，可是状态和取消都是乱码），这是为什么，求楼主指导????
148 楼 sunwang810812 2010-12-17  
楼主是好人,找了N久,才找到这样的好文章^
147 楼 sunwang810812 2010-12-17  
xiaoqulai 写道
代码太多，你为什么不试试我的批量上传工具，超级简单，只需要往jsp里面插入三句话
推荐你看看： AlanXUpload 批量上传

这个网站打不开啊,能告诉我你是怎么用的吗?我的email:tosswang@163.com,谢谢
146 楼 南方觅雪 2010-10-27  
怎么下载不了附件，有两次下载下来了，但不是工程文件，是其它一些不相关的东西
145 楼 hyling927 2010-09-16  
请问楼主，是啥时候调用的UploadFileExampleSubmit.jsp页面 啊？为什么我在上传相片按钮的事件里没有找到呢？
144 楼 wgcniler 2010-02-26  
swfupload自250版本后支持resize功能,请问版主在您这里的基础上如何加上resize功能.
143 楼 joker_yao 2009-12-03  
我测试通过了 但是我改成提交到 servlet 就没反应了？为什么呢
142 楼 xiaoqulai 2009-12-01  
代码太多，你为什么不试试我的批量上传工具，超级简单，只需要往jsp里面插入三句话
推荐你看看： AlanXUpload 批量上传
141 楼 wgcniler 2009-11-02  
请问在上传图片前能对图片进行压缩么?如何实现?
140 楼 wgcniler 2009-10-15  
sbswcidr 写道
:cry:    太感谢了。。。
找了三天没找到的东西。。。
终于找到了。。

我试了一下。。我用的是struts2上传的。。发现有几处地方有问题
1.在action里面要定义这三个属性才能接收到文件的相关信息，不知道可否修改这个属性的名字。不知道在哪修改。 
/** 文件对象 */  
	private List<File> filedata;   
	  
	/** 文件名 */  
	private List<String> filedataFileName;   
	  
	/** 文件内容类型 */  
	private List<String> filedataContentType;   
	  
	/**  
	 * @return the filedata  
	 */  
	public List<File> getFiledata() {   
	    return filedata;   
	}   
	  
	/**  
	 * @param filedata the filedata to set  
	 */  
	public void setFiledata(List<File> filedata) {   
	    this.filedata = filedata;   
	}   
	  
	/**  
	 * @return the filedataFileName  
	 */  
	public List<String> getFiledataFileName() {   
	    return filedataFileName;   
	}   
	  
	/**  
	 * @param filedataFileName the filedataFileName to set  
	 */  
	public void setFiledataFileName(List<String> filedataFileName) {   
	    this.filedataFileName = filedataFileName;   
	}   
	  
	/**  
	 * @return the filedataContentType  
	 */  
	public List<String> getFiledataContentType() {   
	    return filedataContentType;   
	}   
	  
	/**  
	 * @param filedataContentType the filedataContentType to set  
	 */  
	public void setFiledataContentType(List<String> filedataContentType) {   
	    this.filedataContentType = filedataContentType;   
	}

2.如果上传的文件文件名包含中文字符的话。上传不了。这个可能是要转编码之类的。我还没试过。
3.一切准备好了之后我开始上传了，可是发现文件是有传上去了。。而且其它的业务数据也有保存进去了。可是界面上还是显示等待上传字样，于是我认真仔细看了一下原来是这样子的啊，晕，心太急了
是因为我上传是提交到后台action处理的，所以一开始没注意看UploadFileExampleSubmit.jsp这段代码 
if(pageErrorInfo==null){    
            out.print("successed");    
        }

我Action返回的是null，后来改了一下就OK了。
应改为
public String saveFiles(){
	try{
	HttpServletResponse response = ServletActionContext.getResponse();
	//此处得到文件执行上传操作，并保存相关的业务数据		response.getWriter().write("successed");
		}catch(Exception e){
			e.printStackTrace();
		}
		return null;
	}


非常感谢LZ。。。您是好人啊。。。。



应该是改动swfupload.js文件中的"file_post_name";
另外,用struts2的action上传是如果上传成功后要调用this.getResponse().getWriter().print("successed");这样成功上传一个文件后才会进行下一个文件的上传,否则会一直处于等待中.

我觉得采用struts2作为上传更简单一线,上传页面(UploadFileExample.jsp
)基本上除了把" uploadUrl.append("/admin/swfuploadexample/UploadFileExampleSubmit.jsp"); "这个改为上传的action,例如我的改为"uploadUrl.append("/swfupload.do");",别的和普通的上传代码是一样的.
139 楼 sbswcidr 2009-09-28  
用这个上传。。后台是用struts2 编写的。。可是传文件名是中文的会乱码。。。

经过一段时间的思考。。。。

result = new String(str1.getBytes("GBK"),"UTF-8");

这样子转换出来。。会有正确的中文转换出来。。

但是当中文个数是偶数个的时候转换是没有问题的。。

可是如果是奇数个的时候就会有个别字转换不了。。

有人知道是怎么回事吗？

怎么解决？

谢谢。。。
138 楼 sjpsega 2009-09-07  
哥们，不错，顶一个。
这个弄了好久，原先的只能支持Flash 9 ，现在要支持Flash 10 ，累人啊……
137 楼 zhongxiaoyi738 2009-09-07  
上传成功之后报错

---SWFUpload Instance Info---
Version: 2.2.0 Beta 2
Movie Name: SWFUpload_0
Settings:
upload_url:               /ngchnl/webpage/upload/doUpload.jsp
flash_url:                /ngchnl/swpupload/flash/swfupload.swf?swfuploadrnd=772795929
use_query_string:         false
requeue_on_error:         false
http_success:            
file_post_name:           Filedata
post_params:              [object Object]
file_types:               *.txt;*.xls;*.gif
file_types_description:   *.txt;*.xls;*.gif
file_size_limit:          10 MB
file_upload_limit:        10
file_queue_limit:         0
debug:                    true
prevent_swf_caching:      true
button_placeholder_id:    spanButtonPlaceHolder
button_image_url:         /ngchnl/swpupload/images/XPButtonUploadText_61x22.png
button_width:             65
button_height:            29
button_text:              <span class="theFont">选择文件</span>
button_text_style:        .theFont { font-size: 10; }
button_text_top_padding:  3
button_text_left_padding: 12
button_action:            -110
button_disabled:          false
custom_settings:          [object Object]
Event Handlers:
swfupload_loaded_handler assigned:  false
file_dialog_start_handler assigned: false
file_queued_handler assigned:       true
file_queue_error_handler assigned:  true
upload_start_handler assigned:      true
upload_progress_handler assigned:   true
upload_error_handler assigned:      true
upload_success_handler assigned:    true
upload_complete_handler assigned:   true
debug_handler assigned:             true

SWFUpload.SWFObject Plugin settings:
minimum_flash_version:                      9.0.28
swfupload_pre_load_handler assigned:     false
swfupload_load_failed_handler assigned:     false

SWF DEBUG: SWFUpload Init Complete
SWF DEBUG:
SWF DEBUG: ----- SWF DEBUG OUTPUT ----
SWF DEBUG: Build Number:           SWFUPLOAD 2.2.0 Beta 2 2008-10-28
SWF DEBUG: movieName:              SWFUpload_0
SWF DEBUG: Upload URL:             /ngchnl/webpage/upload/doUpload.jsp
SWF DEBUG: File Types String:      *.txt;*.xls;*.gif
SWF DEBUG: Parsed File Types:      txt,xls,gif
SWF DEBUG: HTTP Success:           0
SWF DEBUG: File Types Description: *.txt;*.xls;*.gif (*.txt;*.xls;*.gif)
SWF DEBUG: File Size Limit:        10485760 bytes
SWF DEBUG: File Upload Limit:      10
SWF DEBUG: File Queue Limit:       10
SWF DEBUG: Post Params:
SWF DEBUG:                         op_id=9009
SWF DEBUG: ----- END SWF DEBUG OUTPUT ----
SWF DEBUG:
SWF DEBUG: Event: fileDialogStart : Browsing files. Multi Select. Allowed file types: *.txt;*.xls;*.gif
SWF DEBUG: Select Handler: Received the files selected from the dialog. Processing the file list...
SWF DEBUG: Event: fileQueued : File ID: SWFUpload_0_0
SWF DEBUG: Event: fileQueued : File ID: SWFUpload_0_1
SWF DEBUG: Event: fileDialogComplete : Finished processing selected files. Files selected: 2. Files Queued: 2
EXCEPTION: message: 'document.getElementById(...)' 为空或不是对象
EXCEPTION: number: -2146823281
EXCEPTION: description: 'document.getElementById(...)' 为空或不是对象
EXCEPTION: message: 'document.getElementById(...)' 为空或不是对象
EXCEPTION: number: -2146823281
EXCEPTION: description: 'document.getElementById(...)' 为空或不是对象
SWF DEBUG: StartUpload: First file in queue
SWF DEBUG: Event: uploadStart : File ID: SWFUpload_0_0
SWF DEBUG: Global Post Item: op_id=9009
SWF DEBUG: ReturnUploadStart(): File accepted by startUpload event and readied for upload.  Starting upload to /ngchnl/webpage/upload/doUpload.jsp for File ID: SWFUpload_0_0
SWF DEBUG: Event: uploadProgress (OPEN): File ID: SWFUpload_0_0
SWF DEBUG: Event: uploadProgress: File ID: SWFUpload_0_0. Bytes: 927. Total: 927
SWF DEBUG: Event: uploadSuccess: File ID: SWFUpload_0_0 Data:
SWF DEBUG: successed
SWF DEBUG: Event: uploadComplete : Upload cycle complete.
EXCEPTION: message: 'document.getElementById(...)' 为空或不是对象
EXCEPTION: number: -2146823281
EXCEPTION: description: 'document.getElementById(...)' 为空或不是对象
EXCEPTION: message: 'document.getElementById(...)' 为空或不是对象
EXCEPTION: number: -2146823281
EXCEPTION: description: 'document.getElementById(...)' 为空或不是对象
EXCEPTION: message: 'document.getElementById(...)' 为空或不是对象
EXCEPTION: number: -2146823281
EXCEPTION: description: 'document.getElementById(...)' 为空或不是对象
SWF DEBUG: StartUpload: First file in queue
SWF DEBUG: Event: uploadStart : File ID: SWFUpload_0_1
SWF DEBUG: Global Post Item: op_id=9009
SWF DEBUG: ReturnUploadStart(): File accepted by startUpload event and readied for upload.  Starting upload to /ngchnl/webpage/upload/doUpload.jsp for File ID: SWFUpload_0_1
SWF DEBUG: Event: uploadProgress (OPEN): File ID: SWFUpload_0_1
SWF DEBUG: Event: uploadProgress: File ID: SWFUpload_0_1. Bytes: 927. Total: 927
SWF DEBUG: Event: uploadSuccess: File ID: SWFUpload_0_1 Data:
SWF DEBUG: successed
SWF DEBUG: Event: uploadComplete : Upload cycle complete.
EXCEPTION: message: 'document.getElementById(...)' 为空或不是对象
EXCEPTION: number: -2146823281
EXCEPTION: description: 'document.getElementById(...)' 为空或不是对象
EXCEPTION: message: 'document.getElementById(...)' 为空或不是对象
EXCEPTION: number: -2146823281
EXCEPTION: description: 'document.getElementById(...)' 为空或不是对象
EXCEPTION: message: 'document.getElementById(...)' 为空或不是对象
EXCEPTION: number: -2146823281
EXCEPTION: description: 'document.getElementById(...)' 为空或不是对象
SWF DEBUG: Event: fileDialogStart : Browsing files. Multi Select. Allowed file types: *.txt;*.xls;*.gif
SWF DEBUG: Select Handler: Received the files selected from the dialog. Processing the file list...
SWF DEBUG: Event: fileQueued : File ID: SWFUpload_0_2
SWF DEBUG: Event: fileDialogComplete : Finished processing selected files. Files selected: 1. Files Queued: 1
EXCEPTION: message: 'document.getElementById(...)' 为空或不是对象
EXCEPTION: number: -2146823281
EXCEPTION: description: 'document.getElementById(...)' 为空或不是对象
SWF DEBUG: StartUpload: First file in queue
SWF DEBUG: Event: uploadStart : File ID: SWFUpload_0_2
SWF DEBUG: Global Post Item: op_id=9009
SWF DEBUG: ReturnUploadStart(): File accepted by startUpload event and readied for upload.  Starting upload to /ngchnl/webpage/upload/doUpload.jsp for File ID: SWFUpload_0_2
SWF DEBUG: Event: uploadProgress (OPEN): File ID: SWFUpload_0_2
SWF DEBUG: Event: uploadProgress: File ID: SWFUpload_0_2. Bytes: 927. Total: 927
SWF DEBUG: Event: uploadSuccess: File ID: SWFUpload_0_2 Data:
SWF DEBUG: successed
SWF DEBUG: Event: uploadComplete : Upload cycle complete.
EXCEPTION: message: 'document.getElementById(...)' 为空或不是对象
EXCEPTION: number: -2146823281
EXCEPTION: description: 'document.getElementById(...)' 为空或不是对象
EXCEPTION: message: 'document.getElementById(...)' 为空或不是对象
EXCEPTION: number: -2146823281
EXCEPTION: description: 'document.getElementById(...)' 为空或不是对象
EXCEPTION: message: 'document.getElementById(...)' 为空或不是对象
EXCEPTION: number: -2146823281
EXCEPTION: description: 'document.getElementById(...)' 为空或不是对象
136 楼 zhongxiaoyi738 2009-09-07  
怎么我这里   上传文件的时候不能显示进度条

<%
/**
* 多文件上传
*/
%>
<html>
<%@ page contentType="text/html; charset=GBK"%>
<script type="text/javascript" src="<%=request.getContextPath()%>/swpupload/js/swfupload.js"></script>
<script type="text/javascript" src="<%=request.getContextPath()%>/swpupload/js/swfupload.swfobject.js"></script>
<script type="text/javascript" src="<%=request.getContextPath()%>/swpupload/js/swfupload.queue.js"></script>
<script type="text/javascript" src="<%=request.getContextPath()%>/swpupload/js/fileprogress.js"></script>
<script type="text/javascript" src="<%=request.getContextPath()%>/swpupload/js/handlers.js"></script>


<ai:title value="多文件上传"/>
<script language="JavaScript">

var swfu;

window.onload = function () {
var settings = {
flash_url : "<%=request.getContextPath()%>/swpupload/flash/swfupload.swf",
upload_url: "<%=request.getContextPath()%>/webpage/upload/doUpload.jsp",
post_params:
{
"op_id" : "9009"
},
file_size_limit : "10 MB",
file_types : "*.txt;*.xls;*.gif",
file_types_description : "*.txt;*.xls;*.gif",
file_upload_limit : 10,
file_queue_limit : 0,
custom_settings : {
progressTarget : "fsUploadProgress",
cancelButtonId : "btnCancel",
uploadButtonId : "btnUpload",
myFileListTarget : "idFileList"
},
debug: true,

// Button settings
button_image_url: "<%=request.getContextPath()%>/swpupload/images/XPButtonUploadText_61x22.png",
button_width: "65",
button_height: "29",
button_placeholder_id: "spanButtonPlaceHolder",
button_text: '<span class="theFont">选择文件</span>',
button_text_style: ".theFont { font-size: 10; }",
button_text_left_padding: 12,
button_text_top_padding: 3,

// The event handler functions are defined in handlers.js
file_queued_handler : fileQueued,
file_queue_error_handler : fileQueueError,
file_dialog_complete_handler : fileDialogComplete,
upload_start_handler : uploadStart,
upload_progress_handler : uploadProgress,
upload_error_handler : uploadError,
upload_success_handler : uploadSuccess,
upload_complete_handler : uploadComplete,
queue_complete_handler : queueComplete // Queue plugin event
};

swfu = new SWFUpload(settings);
}


</script>

<body bgcolor="#FCFCFC" topmargin="0px" leftmargin="10px" rightmargin="10px" scroll="yes">
<table width="100%" cellspacing="4" cellpadding="4" border="0" bgcolor="#FCFCFC">
<tr>
<td class="DH1">
<table width="100%" cellspacing="4" cellpadding="4" border="0" bgcolor="#FCFCFC">
<tr>
<td class="DH2">
<STRONG>批量上传 （支持的文件类型：*.txt;*.xls;*.gif；单个相片最大不能超过：10 MB）</STRONG>
</td><td class="DH2" align="right"></td>
</tr>
</table>
<div id="content">
<form id="form1" action="<%=request.getContextPath()%>/webpage/upload/doUpload.jsp" method="post" enctype="multipart/form-data">
<table width="90%" cellspacing="0" cellpadding="0" border="0"><tr><td>
<span id="spanButtonPlaceholder"></span>
<input id="btnUpload" type="button" value="上传相片" class="btn" />
<input id="btnCancel" type="button" value="取消全部上传" disabled="disabled" class="btn" /></td>
</tr></table>
<table id="idFileList" class="uploadFileList"><tr class="uploadTitle"><td><B>文件名</B></td><td><B>文件大小</B></td><td width=100px><B>状态</B></td><td width=35px>&nbsp;</td></tr></table>
等待上传 <span id="idFileListCount">0</span> 个 ，成功上传 <span id="idFileListSuccessUploadCount">0</span> 个
<div id="divSWFUploadUI" style="visibility: hidden;"></div>
<noscript style="display: block; margin: 10px 25px; padding: 10px 15px;">
很抱歉，相片上传界面无法载入，请将浏览器设置成支持JavaScript。
</noscript>
<div id="divLoadingContent" class="content" style="background-color: #FFFF66; border-top: solid 4px #FF9966; border-bottom: solid 4px #FF9966; margin: 10px 25px; padding: 10px 15px; display: none;">
相片上传界面正在载入，请稍后...
</div>
<div id="divLongLoading" class="content" style="background-color: #FFFF66; border-top: solid 4px #FF9966; border-bottom: solid 4px #FF9966; margin: 10px 25px; padding: 10px 15px; display: none;">
相片上传界面载入失败，请确保浏览器已经开启对JavaScript的支持，并且已经安装可以工作的Flash插件版本。
</div>
<div id="divAlternateContent" class="content" style="background-color: #FFFF66; border-top: solid 4px #FF9966; border-bottom: solid 4px #FF9966; margin: 10px 25px; padding: 10px 15px; display: none;">
很抱歉，相片上传界面无法载入，请安装或者升级您的Flash插件。
请访问： <a href="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash" target="_blank">Adobe网站</a> 获取最新的Flash插件。
</div>
</form>
</div>
</td></tr></table>
</body>

</html>


135 楼 sbswcidr 2009-08-12  
:cry:    太感谢了。。。
找了三天没找到的东西。。。
终于找到了。。

我试了一下。。我用的是struts2上传的。。发现有几处地方有问题
1.在action里面要定义这三个属性才能接收到文件的相关信息，不知道可否修改这个属性的名字。不知道在哪修改。 
/** 文件对象 */  
	private List<File> filedata;   
	  
	/** 文件名 */  
	private List<String> filedataFileName;   
	  
	/** 文件内容类型 */  
	private List<String> filedataContentType;   
	  
	/**  
	 * @return the filedata  
	 */  
	public List<File> getFiledata() {   
	    return filedata;   
	}   
	  
	/**  
	 * @param filedata the filedata to set  
	 */  
	public void setFiledata(List<File> filedata) {   
	    this.filedata = filedata;   
	}   
	  
	/**  
	 * @return the filedataFileName  
	 */  
	public List<String> getFiledataFileName() {   
	    return filedataFileName;   
	}   
	  
	/**  
	 * @param filedataFileName the filedataFileName to set  
	 */  
	public void setFiledataFileName(List<String> filedataFileName) {   
	    this.filedataFileName = filedataFileName;   
	}   
	  
	/**  
	 * @return the filedataContentType  
	 */  
	public List<String> getFiledataContentType() {   
	    return filedataContentType;   
	}   
	  
	/**  
	 * @param filedataContentType the filedataContentType to set  
	 */  
	public void setFiledataContentType(List<String> filedataContentType) {   
	    this.filedataContentType = filedataContentType;   
	}

2.如果上传的文件文件名包含中文字符的话。上传不了。这个可能是要转编码之类的。我还没试过。
3.一切准备好了之后我开始上传了，可是发现文件是有传上去了。。而且其它的业务数据也有保存进去了。可是界面上还是显示等待上传字样，于是我认真仔细看了一下原来是这样子的啊，晕，心太急了
是因为我上传是提交到后台action处理的，所以一开始没注意看UploadFileExampleSubmit.jsp这段代码 
if(pageErrorInfo==null){    
            out.print("successed");    
        }

我Action返回的是null，后来改了一下就OK了。
应改为
public String saveFiles(){
	try{
	HttpServletResponse response = ServletActionContext.getResponse();
	//此处得到文件执行上传操作，并保存相关的业务数据		response.getWriter().write("successed");
		}catch(Exception e){
			e.printStackTrace();
		}
		return null;
	}


非常感谢LZ。。。您是好人啊。。。。
134 楼 yuezhou1226 2009-05-28  
SWFUpload is not a constructor
onload()()UploadFi...ample.jsp (第 64 行)
[Break on this error] swfu = new SWFUpload(settings);



为什么我老是出现这个错误啊？实现是找不出哪儿错了！
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    step-by-step多文件WEB批量上传(swfupload)的完美解决方案的相关

    本解决方案将详细介绍如何使用SWFUpload实现多文件WEB批量上传的步骤，并解决可能遇到的问题。 首先，SWFUpload是一个开源的JavaScript库，它使用Flash技术来处理文件上传。由于Flash支持拖放和多文件选择，因此...

    SwfUpload(文件批量上传，完美运行，注释丰富)

    SwfUpload 是一款开源的...总的来说，SwfUpload是一个强大且灵活的文件上传解决方案，尤其适用于需要大量处理用户上传文件的网站或应用。其完整的注释和易用性使得它成为开发者们实现批量上传功能的首选工具。

    asp 批量上传 swfupload

    使用这个资源，你可以快速了解如何在ASP项目中整合SWFUpload，进行批量文件上传的实现。 总之，ASP批量上传SWFUpload是结合了Flash技术和ASP服务器端脚本的一种高效文件上传方案，它提供了良好的用户体验，同时需要...

    swfupload批量上传文件

    总结，swfupload作为一个成熟的文件上传解决方案，为批量上传提供了强大的功能和良好的用户体验。然而，随着技术的发展，开发者也需要关注其兼容性问题，适时采用HTML5等新技术来替换或补充。通过与PHP的紧密结合，...

    java 批量 多文件 上传 SwfUpload插件兼容所有浏览器

    java 批量 多文件 上传 SwfUpload插件兼容所有浏览器，火狐需要安装最新的flash reader，压缩包内有最新的flash reader，实例是上传多张图片，只需稍加修改可以上传任何格式的文件，很好看很好用，特意整理出来分享...

    swfupload 批量上传文件

    **SWFUpload 知识点详解** ...通过以上步骤和知识点，你将能够有效地使用SWFUpload实现批量文件上传功能，并在MyEclipse 6.5环境下进行开发和调试。记住，持续优化和测试是确保上传功能稳定性和用户体验的关键。

    swfupload多选批量带进度条文件上传，批量删除

    综上所述，SwfUpload为Web开发者提供了一套高效、直观的文件上传解决方案。它不仅支持多选批量上传和进度显示，还具备缩略图预览和批量删除功能，大大提升了文件管理的便捷性和用户体验。在实际项目中，结合合理的...

    SWFupload_文件批量上传

    综上所述，SWFupload是网页批量文件上传的优秀解决方案，其强大功能和易用性使得它在开发中得到了广泛应用。通过了解其工作原理和集成方式，开发者能够更好地利用这一工具提升用户在上传文件时的体验。

    ASP.NET批量上传SwfUpload-Ext

    总的来说，ASP.NET批量上传SwfUpload-Ext的组合是一种强大的解决方案，它结合了SwfUpload的高效上传能力和ExtJS的丰富交互体验，为用户提供了高效、安全的文件上传体验。在实际开发中，开发者需要根据项目需求灵活...

    SWFUpload多个超大文件上传

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

    SwfUpload多文件上传

    2. **多文件上传**：SwfUpload的核心功能是支持多个文件的批量上传。用户可以通过选择多个文件来一次性上传，减少了重复操作。 3. **进度条显示**：SwfUpload可以显示上传进度，让用户了解文件上传的状态，提高了...

    SWFUpload批量大文件上传

    SWFUpload是一款经典的JavaScript库，专门用于处理大文件和批量文件的上传。它利用Flash技术在浏览器端提供用户友好的上传界面，同时支持多文件选择和断点续传功能，尤其适用于那些需要处理大量数据或者单个文件体积...

    SWFUpload批量上传图片

    SWFUpload是一款强大的JavaScript与Flash相结合的文件上传组件，它被广泛用于网页中的批量图片上传功能。这个"SWFUpload批量上传图片"的项目是一个基于MyEclipse的工程实例，旨在帮助开发者理解和实现批量上传图片的...

    SwfUpload 多文件上传

    总之，SwfUpload结合Ext.Net为.NET开发者提供了一个高效、可定制的多文件上传解决方案，提高了Web应用的交互性和用户体验。通过熟练掌握这两项技术，开发者可以轻松地构建出满足各种需求的文件上传系统。

    多文件上传swfupload

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

    swfupload多文件选择上传(WEB) for .Net

    WEB版一次选择多个文件进行批量上传(swfupload)的解决方案 一般的WEB方式文件上传只能使用FileUpload控件进行一个文件一个文件的进行上传，就算是批量上传，也要把文件一个一个的添加到页面，无法如 windows程序...

    SWFUpload上传

    本项目是struts2和swfupload结合，实现单个文件上传、上传后预览（index.jsp），和批量上传（multiple.jsp），里面都有代码注释和一个整理的说明文档（SWFUpload说明文档），讲的非常非常详细，都是本人亲自整理。...

Magicbox
Global site tag (gtag.js) - Google Analytics