由於jquery.uploadify是基於flash的jquery上傳控件，客戶老是說出問題，所以今天換成了一個純js的異步上傳控件。
這方面的資料很少，故此記下來分享一下。
項目地址：Fine Uploader
1.jsp頁面：
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <%@ page language="java" import="java.util.*"%> <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%> <% String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; %> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Fine Uploader Demo</title> <link href="./plugins/jquery.fineuploader-3.7.1/fineuploader-3.7.1.min.css" rel="stylesheet"> <!-- 樣式 --> </head> <body> <div id="jquery-wrapped-fine-uploader"></div> <div id="triggerUpload">上傳</div> <script type="text/javascript" src="./plugins/jquery/jquery-1.7.min.js"></script> <!-- jquery --> <script src="./plugins/jquery.fineuploader-3.7.1/jquery.fineuploader-3.7.1.min.js"></script> <!-- Fine Uploader --> <script> $(document).ready(function () { $('#jquery-wrapped-fine-uploader').fineUploader({ request: { endpoint: 'fineUpload.action' //處理文件上傳的action }, text: { uploadButton: '選擇上傳文件' //上傳按鈕的文字 }, multiple: false, //是否為多文件上傳 validation: { allowedExtensions: ['apk', 'rar', 'zip',], //限制上傳格式 sizeLimit: 1024* 1024* 1024 * 1024 * 1024 //限制上傳大小 }, autoUpload: false, //是否自動提交 editFilename: { //編輯名字 enable: true } }).on({ //注冊監聽事件 "complete": function(event, id, fileName, responseJSON) { //完成 if(responseJSON.success) { alert(responseJSON.success); } }, "cancel": function(event, id,fileName){ //取消 alert(fileName); },
"submit": function(event, id, fileName) { //選擇文件后
alert('文件選擇');
} "error": function(event, id, fileName, reason) { //出錯,這里還有些其他事件，我暫時不用就沒實踐，大家可以自己去看api alert(reason); } }); }); $("#triggerUpload").click(function() { //手動提交 $('#jquery-wrapped-fine-uploader').fineUploader('uploadStoredFiles'); }); </script> </body> </html>
這種配置方法是基於jquery的，官方還有基於原生js的。
2. struts2的action:
package cn.zyc.action; import java.io.File; import java.io.FileInputStream; import java.io.FileNotFoundException; import java.io.FileOutputStream; import java.io.IOException; import java.io.PrintWriter; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import org.apache.struts2.ServletActionContext; import org.apache.struts2.convention.annotation.Action; import cn.zyc.util.ActionUtil; import com.opensymphony.xwork2.ActionSupport; public class FineUploadTest extends ActionSupport{ private File qqfile; //上傳文件的name,默認就是這個 private String qqfileFileName; //上傳文件名 HttpServletResponse response = (HttpServletRequest)ActionContext.getContext().get(ServletActionContext.HTTP_REQUEST); HttpServletRequest request = (HttpServletRequest)ActionContext.getContext().get(ServletActionContext.HTTP_RESPONSE); public File getQqfile() { return qqfile; } public void setQqfile(File qqfile) { this.qqfile = qqfile; } public String getQqfileFileName() { return qqfileFileName; } public void setQqfileFileName(String qqfileFileName) { this.qqfileFileName = qqfileFileName; } @Action(value="fineUpload") public void fineUpload(){ String path = ServletActionContext.getServletContext().getRealPath("/"); System.out.println("path= " + path); FileOutputStream fos = null; FileInputStream fis = null; if(qqfile != null) { try { fos = new FileOutputStream(path + "\\" + qqfileFileName); fis = new FileInputStream(getQqfile()); byte[] buffer = new byte[1024]; int len = 0; while((len = fis.read(buffer)) > 0) { fos.write(buffer, 0, len); } } catch (FileNotFoundException e) { e.printStackTrace(); } catch (IOException e) { e.printStackTrace(); } finally { try { if(fis != null) { fis.close(); } if(fos != null) { fos.close(); } } catch (IOException e) { e.printStackTrace(); } } try { PrintWriter writer = response.getWriter(); writer.write("{\"success\": \"ok\"}"); //這里注意返回的內容必須是json的格式 writer.flush(); writer.close(); } catch (IOException e) { e.printStackTrace(); } } } }
這里的兩個注意點是：1）上傳文件的名字默認是qqfile，且我沒找到自行配置名字的選項。如果有知道的請告訴小弟哈。
2）ajax返回的內容必須是json的格式
3. 參考資料
1)亂世經典 注意他的版本貌似有點舊了，但是講的很詳細