異步上傳相信大家都做過類似的功能，JqueryAjaxFileUploader為我們提供了更簡單的實現和使用方式。不過既然是JQUERY的插件那么它所依賴的環境大家都懂得。JqueryAjaxFileUploader并不華麗，也沒有提供美化文件上傳控件的css，它并不像jQuery File Upload（喜歡的同學可以去嘗試下），提供了美觀的樣式和專門的圖片預覽、多任務上傳等等， JqueryAjaxFileUploader?所擁有的很簡單，只是異步上傳文件的功能，當然這并不排除由你親自為它披上一件華麗的外衣。
?
jQuery File Uplaod插件官方Demo:
好了言歸正傳，讓我們一起來看下 JqueryAjaxFileUplaoder?的使用步驟：
Java代碼??
<html>??????<head>??????????<base?href="<%=basePath%>">????????????<title>My?starting?page</title>??????????<meta?http-equiv="pragma"?content="no-cache">??????????<meta?http-equiv="cache-control"?content="no-cache">??????????<meta?http-equiv="expires"?content="0">??????????<meta?http-equiv="keywords"?content="keyword1,keyword2,keyword3">??????????<meta?http-equiv="description"?content="This?is?my?page">??????????<script?type="text/javascript"?src="js/jquery.js">??</script>??????????<script?type="text/javascript"?src="js/ajaxfileupload.js">??</script>??????????<script?type="text/javascript">??function?ajaxFileUpload()?{????????$("#loading").ajaxStart(function()?{??????????$(this).show();??????})????.ajaxComplete(function()?{??????????$(this).hide();??????});??????$.ajaxFileUpload(?{??????????url?:?'fileUpload.action',????????secureuri?:?false,????????fileElementId?:?'File',????????dataType?:?'json',????????success?:?function(data,?status)?????????{??????????????alert(data.message);????????????if?(typeof?(data.error)?!=?'undefined')?{??????????????????if?(data.error?!=?'')?{??????????????????????alert(data.error);??????????????????}?else?{??????????????????????alert(data.message);??????????????????}??????????????}??????????},??????????error?:?function(data,?status,?e)????????{??????????????alert(e);??????????}??????})??????return?false;??}??</script>??????</head>????????<body>??????????<img?src="img/loading.gif"?id="loading"?style="display:?none;">??????????<input?type="file"?id="file"?name="file"?/>??????????<br?/>??????????<input?type="button"?value="上傳"?οnclick="return?ajaxFileUpload();">??????</body>??</html>?? ?
注意：引入JS文件不要搞錯了順序，一定是先引入jQuery再引入插件。否則后果的嚴重性你是可以想到的。
上文中我請求了一個Action，并在Action里寫好所需要的參數，以及文件格式的判斷（這里我只是做的偽實現，過濾文件格式還請大家認真考慮），這個大家肯定都熟。
?
Java代碼??
import?java.io.File;??import?java.io.FileInputStream;??import?java.io.FileOutputStream;????import?org.apache.struts2.ServletActionContext;????import?com.opensymphony.xwork2.ActionSupport;????@SuppressWarnings("serial")??public?class?FileAction?extends?ActionSupport?{????????private?File?file;??????private?String?fileFileName;??????private?String?fileFileContentType;????????private?String?message?=?"你已成功上傳文件";????????????public?String?getMessage()?{??????????return?message;??????}????????public?void?setMessage(String?message)?{??????????this.message?=?message;??????}????????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;??????}????????public?String?getFileFileContentType()?{??????????return?fileFileContentType;??????}????????public?void?setFileFileContentType(String?fileFileContentType)?{??????????this.fileFileContentType?=?fileFileContentType;??????}????????@SuppressWarnings("deprecation")??????@Override??????public?String?execute()?throws?Exception?{????????????????????String?path?=?ServletActionContext.getRequest().getRealPath("/upload");????????????try?{??????????????File?f?=?this.getFile();??????????????if(this.getFileFileName().endsWith(".exe")){??????????????????message="對不起,你上傳的文件格式不允許!!!";??????????????????return?ERROR;??????????????}??????????????FileInputStream?inputStream?=?new?FileInputStream(f);??????????????FileOutputStream?outputStream?=?new?FileOutputStream(path?+?"/"+?this.getFileFileName());??????????????byte[]?buf?=?new?byte[1024];??????????????int?length?=?0;??????????????while?((length?=?inputStream.read(buf))?!=?-1)?{??????????????????outputStream.write(buf,?0,?length);??????????????}??????????????inputStream.close();??????????????outputStream.flush();??????????}?catch?(Exception?e)?{??????????????e.printStackTrace();??????????????message?=?"對不起,文件上傳竟然失敗了!!!!";??????????}??????????return?SUCCESS;??????}????}??? 還有重要的一步，配置Struts配置文件，一定要注意的是Action中result的配置contentType參數是一定要有的，否則瀏覽器總是提示將返回的JSON結果另存為文件，不會交給ajaxfileupload處理。這是因為struts2 JSON Plugin默認的contentType為application/json，而ajaxfileupload則要求為text/html。
?
Xml代碼??
<?xml?version="1.0"?encoding="UTF-8"??>??<!DOCTYPE?struts?PUBLIC?"-//Apache?Software?Foundation//DTD?Struts?Configuration?2.1//EN"?"http://struts.apache.org/dtds/struts-2.1.dtd">??<struts>??????<package?name="struts2"?extends="json-default">??????????<action?name="fileUpload"?class="com.ajaxfile.action.FileAction">??????????????<result?type="json"?name="success">??????????????????<param?name="contentType">??????????????????????text/html??????????????????</param>??????????????</result>??????????????<result?type="json"?name="error">??????????????????<param?name="contentType">??????????????????????text/html??????????????????</param>??????????????</result>??????????</action>??????</package>??</struts>?????? ?Ok就是這樣，要動手的同學馬上Coding吧。順便提供下JqueryAjaxFileUploader的JS文件。
?
轉載于:https://www.cnblogs.com/ranzige/p/3816464.html
總結
以上是生活随笔為你收集整理的JQUERY插件JqueryAjaxFileUplaoder----更简单的异步文件上传的全部內容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。
