WEB中多文件上传+进度条的实现（基于swfupload）

功能完全支持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。

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


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

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

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

这三部做完就可以了。具体实现可以参见附件中的例子。

 ============================================================

 

遇到的一些问题作汇总后需要注意的一些地方列了出来：

<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);
就可以了。

具体实现可以参照附件 swfWebTest.rar，这个一个完整的Myeclipse Web项目。

 

 

==================== SWFUpload的cookie Bug ====================

 使用SWFUpload的时候一定要小心cookie bug：在非IE内核内核的浏览器下使用SWFUpload上传文件时，该请求会忽略自身浏览器中的所有cookie，只会将IE浏览器下的属于该域的持久cookie(persistent cookies)发送到服务端，非持久cookie（ Session only）不会被发送 。遗憾的是此Bug并非是SWFUpload内部实现的问题（所有的Flash上传都会存在此bug），而是FlashPlayer的bug，所有使用FileReference类上传文件时会存在此问题。幸运的是我们有办法绕开此陷阱。

假设一种使用场景，用户登录系统以后，我们会在cookie中写入一个非持久的key值来判断用户身份。当用户使用SWFUpload上传文件的时候，服务端程序通过Requeset中的cookie来判断用户身份。在IE下我们的功能正常，但在FF下你会发现服务端脚本从Request中取到的 cookie是空的，这就是很多人遇到的cookie丢失。前面我也提到了非IE内核的浏览器忽略了自身的所有cookie。

假如用户同时在IE下登录了另外一个账号，并且选择了记住账号，那么我们的程序逻辑可能会写入一个持久的key值。然后用户在FF下上传照片，服务端是接受到cookie中的key值了，但遗憾的是此key是IE下登录账号的cookie，一不小心这就造成了用户身份判断错误的bug，A用户传了张照片居然是属于B用户的。

解决方法：

幸运的是AS3提供的URLRequest对象来包装客户端请求，我们可以上传文件的同时，给请求添加POST值对。因此当我们的上传程序需要依赖客户端cookie的时候，我们可以在上传开始前使用JS将我们需要的cookie读取出来，然后使用SWFUpload提供的addPostParam方法添加到POST中去，服务端从POST中接受所需要的"cookie"值即可，不再依赖Request中的cookie机制。

 

 

 

评论

8 楼 xichucq 2012-05-24  

成功或者失败后怎么把结果传给对应的js？

7 楼 freefly64 2012-04-20  

6 楼 newwpp 2010-06-01  

真好真强大

5 楼 tdqing 2010-05-21  

hunter123456 写道

点击“上传相片”按钮后
状态一直显示等待上传！！

你用第三个例子运行，直接用myeclipse打开就可以。

4 楼 tdqing 2010-05-21  

hunter123456 写道

我三个例子都试了一下，怎么都不行啊，
我的浏览器是ie8,与浏览器没有关系吧？
我的flash_player版本是10。0的！

“一个完整的Myeclipse Web项目”这个项目是可以直接运行的。

3 楼 hunter123456 2010-05-19  

点击“上传相片”按钮后
状态一直显示等待上传！！

2 楼 hunter123456 2010-05-19  

我三个例子都试了一下，怎么都不行啊，
我的浏览器是ie8,与浏览器没有关系吧？
我的flash_player版本是10。0的！

1 楼 lshaohe 2010-05-10