本文介绍jQuery的一个插件uploadify，现在的版本支持两种实现。一个是flash，一个是HTML5。本文介绍的是flash版本的。

uploadify的官网

uploadify介绍

uploadify是一个jQuery插件,让程序员很容易就实现多文件的上传功能。有两种不同的版本，一个是flash，另一个是HTML5.

特点 多文件上传 拖拽（HTML5版本） 可以实时的查看上传情况（百分比，上传速度等） 定义上传文件的限制，如大小，数目，类型uploadify的API

因为官网已经有很详细的文档，而且简单易懂，这边就不在详细介绍uploadify的API。

Struts2与uploadify的结合

服务器端的代码与之前文章介绍的差不多，所以为了减少文章的篇幅，这边就不在展示服务器端的代码了。现在具体讲解前端界面的实现。

1.下载uploadify

2.新建上传页面，引入jQuery，uploadify的js。如下所示：

<%@pagelanguage="java"contentType="text/html;charset=UTF-8"pageEncoding="UTF-8"%><!DOCTYPE><html><head><metahttp-equiv="Content-Type"content="text/html;charset=UTF-8"><title>FileUpload</title><linkrel="stylesheet"type="text/css"href="css/uploadify.css"/><linkrel="stylesheet"type="text/css"href="css/UploadifyFileUpload.css"/></head><body><divid="head"><h4>利用uploadify实现文件上传</h4></div><divid="body"><divclass="example"><div><h7>example1</h7></div><div><inputtype="file"id="file_upload1"/></div></div></div><divid="footer"></div><scripttype="text/javascript"src="js/jquery-1.9.1.js"></script><scripttype="text/javascript"src="js/jquery.uploadify-3.1.js"></script><scripttype="text/javascript"src="js/UploadifyFileUpload.js"></script></body></html>

2.UploadifyFileUpload.js

$(function(){//example1$('#file_upload1').uploadify({'swf':'flash/uploadify.swf',//指定flash，在下载的uploadify里有'uploader':'jsonResultFileLoadAction',//action地址'fileObjName':'file',//文件名'buttonText':'浏览',//按钮显示'buttonCursor':'point',//按钮鼠标样式'onUploadSuccess':function(file,data,response){alert('Thefile'+file.name+'wassuccessfullyuploadedwitharesponseof'+response+':'+data);}//上传成功后的调函数});});

总结：uploadify是一个非常棒的jQuery插件，帮助开发人员快速轻松地实现一个功能强大的文件上传。

附件：http://down.51cto.com/data/2362510