生活随笔
收集整理的這篇文章主要介紹了
WEB文件上传之JQuery ajaxfileupload插件使用（二）
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
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控件，不過這種解決方案也不適合進行多文件的提交，所以無傷大雅。
總結
以上是生活随笔 為你收集整理的WEB文件上传之JQuery ajaxfileupload插件使用（二） 的全部內容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔 網站內容還不錯，歡迎將生活随笔 推薦給好友。
