1、请下载uploadify3.2插件，下载地址：http://download.csdn.net/detail/harderxin/5515929
4、uploadify官方地址：http://www.uploadify.com/，可以随时关注，版本不同，其中内置的函数会有所不同
2、注意：jquery版本须为jquery-1.7.2.min.js，1.4版本不支持，上面下载中的内容已经包含在里面了，必须安装swf文件才能运行
3、在jsp页面中引入插件
<script type="text/javascript" src="uploadify/jquery-1.7.2.min.js"></script>
<link rel="stylesheet" type="text/css" href="uploadify/uploadify.css" />
<script type="text/javascript" src="uploadify/jquery.uploadify.min.js"></script>
<script type="text/javascript" src="uploadify/jquery.uploadify.js"></script>
4、页面效果：其中自带进度条
5、页面js脚本
<script type="text/javascript"> $(function() { $('#file_upload').uploadify({ 'swf' : 'uploadify/uploadify.swf',//swf文件 //指向后台操作的action，可以带参数 'uploader' : 'imageOperate!uploadReportImg.do?reportId=${reportId}&operateType=${operateType}&planId=${planId}', 'auto' : false,//是否自动上传 'height':25,//按钮的高度 'multi':true,//是否进行多文件上传 'buttonText':'选择文件',//浏览文件按钮文本 'fileObjName':'file',//后台接收表单控件的名字，必须与后台名称保持一致，相当与input type=file的name属性 'queueID':'fileQueue',//绑定显示上传队列的div 'fileTypeExts':'*.jpg;*.png;*.gif;',//限制文件上传的类型 'method' : 'post',//提交方式 'removeTimeout':1,//上传完成后队列多长时间后消失 'onUploadSuccess' : function(file, data, response) {//每个上传完成并成功的文件都会触发本事件 if(data=="success"){ //$('#msg').html('图片上传成功!'); }else{ top.Dialog.alert("图片上传失败!"); } }, 'onQueueComplete':function(queueData){//队列全部上传触发函数 top.Dialog.alert(queueData.uploadsSuccessful+"张图片上传成功!",function(){ top.Dialog.close(); }); }, //检测FLASH失败调用 'onFallback':function(){ top.Dialog.alert("您未安装FLASH控件，无法上传图片！请安装FLASH控件后再试!"); } }); }); </script>
页面文件
<body rel="layout"> <input type="hidden" id="reportId" value="${reportId}"/> <input type="hidden" id="planId" value="${planId}"/> <input type="hidden" id="operateType" value="${operateType}"/> <div class="ui-layout-center"> <div class="header"> <table align="center"><tr> <td ><input type="file" name="file_upload" id="file_upload" /></td> <td width="90px" align="right"><input type="button" value="开始上传" $('#file_upload').uploadify('upload','*');" /></td> <td width="90px" align="right"><input type="button" value="取消上传" $('#file_upload').uploadify('cancel','*');" /></td> <td width="90px" align="right"><span id="msg"></span></td> </tr></table> </div> <div class="content" id="fileQueue" > </div> </div> </body>
6、编写后台处理action
/** * 图像操作Action * @author Administrator * */ public class ImageOperateAction { //文件上传,与前台页面的fileObjName保持一致 private File[] file; private String[] fileFileName; public File[] getFile() { return file; } public void setFile(File[] file) { this.file = file; } public String[] getFileFileName() { return fileFileName; } public void setFileFileName(String[] fileFileName) { this.fileFileName = fileFileName; } /** * 上传报活图片 * @return * @throws Exception */ public String uploadReportImg() throws Exception{ //这样我们就可以得到file和fileName对象，进行我们的逻辑操作啦 System.out.println("file='+file); System.out.println("fileName='+fileFileName[0]); } }