1.JQuery ajaxfileupload插件使用準備
下載地址：
http://www.phpletter.com/DOWNLOAD/
?
2.原理分析
ajaxfileupload也是利用iframe實現無刷新異步提交，與我的上一篇文章（WEB文件上傳之apache common upload使用（一））中對iframe使用的方式有些不同。ajaxfileupload是通過監聽iframe的onload方法來實現， 當從服務端處理完成后，就觸發iframe的onload事件調用其綁定的方法，在綁定的方法中獲取iframe中服務器返回的數據體（支持的普通文本,json,xml,script, html）
?
3.具體使用
jsp頁面
Html代碼?
?
- <!DOCTYPE?html?PUBLIC?"-//W3C//DTD?HTML?4.01?Transitional//EN"?"http://www.w3.org/TR/html4/loose.dtd">??
- <html>??
- <head>??
- ????<title>JQuery?ajaxfileupload文件上傳</title>??
- ????<meta?http-equiv="Content-Type"?content="text/html;?charset=UTF-8">??
- ????<link?type="text/css"?rel="stylesheet"?href="css/ajaxfileupload.css"?>??
- ????<script?type="text/javascript"?src="js/jquery/jquery-1.9.1.js"></script>??
- ????<script?type="text/javascript"?src="js/jquery/ajaxfileupload.js"></script>??
- ??????
- ????<script?type="text/javascript">??
- ??
- ????//定時器對象??
- ????var?uploadProcessTimer?=?null;??
- ??
- ????//獲取文件上傳進度??
- ????function?getFileUploadProcess()?{??
- ????????$.get('/upload/getFileProcessServlet',?function(data)?{??
- ????????????$('#fileUploadProcess').html(data);??
- ????????});??
- ????}??
- ??
- ????function?ajaxFileUpload()??
- ????{??
- ????????//設置加載圖標的顯示??
- ????????$('#loading').show();??
- ????????uploadProcessTimer?=?window.setInterval(getFileUploadProcess,?20);??
- ??
- ????????$.ajaxFileUpload??
- ????????({??
- ????????????url:'/upload/ajaxUploadServlet',??
- ????????????secureuri:false,??
- ????????????fileElementId:'fileToUpload',??
- ????????????dataType:?'json',??
- ????????????data:{name:?$('#name').val()},??
- ????????????success:?function?(data,?status)??
- ????????????{??
- ????????????????//清除定時器??
- ????????????????if(uploadProcessTimer)?{??
- ????????????????????window.clearInterval(uploadProcessTimer);??
- ????????????????}??
- ????????????????$('#loading').hide();??
- ????????????????var?message?=?data['message'];??
- ????????????????var?code?=?data['code'];??
- ????????????????if(code?!=?200)?{??
- ????????????????????$('#fileUploadProcess').html('0%');??
- ????????????????}??
- ????????????????if(message)??
- ????????????????{??
- ????????????????????alert(data.message);??
- ????????????????}??
- ????????????},??
- ????????????error:?function?(data,?status,?e)??
- ????????????{??
- ????????????????//清除定時器??
- ????????????????if(uploadProcessTimer)?{??
- ????????????????????window.clearInterval(uploadProcessTimer);??
- ????????????????}??
- ????????????????$('#loading').hide();??
- ????????????????//這里處理的是網絡異常，返回參數解析異常，DOM操作異常??
- ????????????????alert("上傳發生異常");??
- ????????????}??
- ????????})??
- ??
- ????????return?false;??
- ????}??
- ????</script>??
- </head>??
- <body>??
- <h2>JQuery?ajaxfileupload文件上傳</h2>??
- <img?id="loading"?src="images/loading.gif"?style="display:none;">??
- 用戶信息：??<br/>??
- ????姓名：<input?id="name"?name="name"?type="text">?<br/>??
- ????附件：<input?id="fileToUpload",?name="file1"?type="file"?class="input">?<br/>??
- ????<br><br>??
- ????<input?type="button"?οnclick="return?ajaxFileUpload();"?value="上傳"><br/>??
- 上傳進度：<label?id="fileUploadProcess"></label>??
- </body>??
- </html>??
?
服務端處理修改
由原來的返回script改為純JSON數據格式的返回
AjaxUploadFileServlet.java關鍵變動
Java代碼?
?
- /**?
- ?*?返回結果函數?
- ?*?@param?response?
- ?*?@param?state?
- ?*/??
- private?void?responseMessage(HttpServletResponse?response,?State?state)?{??
- ????response.setCharacterEncoding(encode);??
- ????response.setContentType("text/html;?charset="?+?encode);??
- ????Writer?writer?=?null;??
- ????try?{??
- ????????writer?=?response.getWriter();??
- ????????writer.write("{\"code\":"?+?state.getCode()?+",\"message\":\""?+?state.getMessage()+?"\"}");??
- ????????writer.flush();??
- ????????writer.close();??
- ????}?catch(Exception?e)?{??
- ????????logger.error(e.getMessage(),?e);??
- ????}?finally?{??
- ????????IOUtils.closeQuietly(writer);??
- ????}??
- }??
?
4.總結
ajaxfileupload插件簡化了文件上傳的過程，頁面上無需定義from表單，提交時自動完成臨時form表單創建target為臨時創建的iframe， 并將file控件復制一份到表單內進行提交，完成提交后自動銷毀臨時生成的form表單和iframe。
缺點：不支持多個file控件，不過這種解決方案也不適合進行多文件的提交，所以無傷大雅。
: “TypeError: Cannot read properties of undefined (reading ‘graphic‘)“)
