1、首先在uploadify官網下載相關的文件,目前有兩種類型的,一種是flash(免費),另一種是html5(要收費)
然后部署到項目里
這里需要
uploadify.js
uploadify.min.js
uploadify.css
uploadify-cancel.png
uploadify.swf
當然別忘了添加文件上傳時jar包
commons-fileupload.jar和commons-io.jar
2、然后進行初始化
<script type="text/javascript" src="<%=request.getContextPath() %>/js/uploadify/jquery.uploadify.min.js"></script> <script type="text/javascript" src="<%=request.getContextPath() %>/js/uploadify/jquery.uploadify.js"></script> <script type="text/javascript" src="<%=request.getContextPath() %>/js/uploadify/swfobject.js"></script> <link href="<%=request.getContextPath() %>/js/uploadify/uploadify.css"> <script type="text/javascript"> $(function(){ $("#file_upload").uploadify({//上傳文件 'method' : 'post', 'debug':'true',//開發者模式 'uploader' : 'upload/', //文件上傳的請求 'swf':'uploadify.swf',//動態控件 'cancelImg' : 'files/images/css/uploadify-cancel.png', //取消圖片 'queueID' : 'queue',//與下面的id對應 文件上傳隊列顯示的地方 'fileDesc' : 'rar文件或zip文件', 'fileExt' : '*.rar;*.zip;*.jpg;*.png;*.exe;*.gif', //控制可上傳文件的擴展名,啟用本項時需同時聲明fileDesc 'auto' : false, //是否自動上傳 'multi' : false, //是否多文件上傳 'simUploadLimit' : 2, 'progressData ': 'percentage',//顯示上傳進度方式 scriptData:{'name':'value'} , 'buttonText' : '附件xx',//文件選擇按鈕名稱 }); });
下面是上傳調用,特別是uploadify的上傳和取消的函數,在uploadify的不同版本其函數的調用方式也稍有差距
<div id="queue"></div> <input id="file_upload" name="file_upload" type="file" multiple="true"> <p ><a href="javascript:$('#file_upload').uploadify('upload', '*')">上傳文件</a>
| <a href="javascript:$('#file_upload').uploadify('stop')">停止上傳!</a> </p>
@RequestMapping(value="/upload",method=RequestMethod.POST) public void uploadify(@RequestParam("Filedata")MultipartFile multiFile,HttpServletRequest request, HttpServletResponse response) throws IOException, FileUploadException{ System.out.println("上傳文件"); System.out.println("name:"+multiFile.getOriginalFilename()); System.out.println("inputstream"+multiFile.getInputStream()); ServletContext sc = request.getSession().getServletContext(); String dir = sc.getRealPath("/upload");//附件存放服務器的路徑 System.out.println(dir); File file = new File(dir); if(!file.exists()){ file.mkdirs(); } String filename = multiFile.getOriginalFilename(); String realname = filename.substring(0, filename.indexOf(".")); //防止文件被覆蓋,以納秒生成文件 Long _l = System.nanoTime(); String _extfilename = filename.substring(filename.indexOf(".")); filename = _l+_extfilename; String uploadPath = request.getContextPath()+""+dir+"/"+filename; String responseStr = ""; try { FileUtils.writeByteArrayToFile(new File(dir, filename), multiFile.getBytes()); responseStr = "上傳成功!"; } catch (Exception e) { e.printStackTrace(); responseStr = "fail"; System.out.println("上傳失敗!"); }
}
注意還得在springmvc配置文件弄個resolver,否則文件上傳是會報請求找不到流的異常
<bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver"> <property name="defaultEncoding" value="utf-8"></property> <property name="maxUploadSize" value="104857600"/> </bean> <!-- 該異常是SpringMVC在檢查上傳的文件信息時拋出來的,而且此時還沒有進入到Controller方法中 --> <bean id="exceptionResolver" class="org.springframework.web.servlet.handler.SimpleMappingExceptionResolver"> <property name="exceptionMappings"> <props> <!-- 遇到MaxUploadSizeExceededException異常時,自動跳轉到XXX頁面 --> <prop key="org.springframework.web.multipart.MaxUploadSizeExceededException">exception/fileuploadexception</prop> </props> </property> </bean>