這次帶給大家HTML5+Ajax檔案上傳進度條顯示(圖文詳解),HTML5+Ajax檔案上傳進度條顯示的注意事項有哪些,下面就是實戰案例,一起來看一下。
原本打算使用jquery外掛程式進行非同步檔案上傳,例如uploadfy但是需要額外的支持,也有人用iframe模仿非同步上傳機制,感覺都比較彆扭。因為專案不考慮低版瀏覽器,所以決定用html5實作。下面只是一個簡單的demo,具體樣式需要自己做。
後台基於strut2進行檔案處理,具體因專案而定。只是要注意設定檔案大小的限制。
首先是上傳頁面,比較簡單,附帶了文件上者這個參數。
upload.jsp
<%@page language="java" pageEncoding="UTF-8" contentType="text/html; charset=UTF-8"%> <% String path = request.getContextPath(); %> <!DOCTYPE html> <html> <head> <title>使用XMLHttpRequest上传文件</title> <script type="text/javascript"> var xhr = new XMLHttpRequest(); //监听选择文件信息 function fileSelected() { //HTML5文件API操作 var file = document.getElementById('fileName').files[0]; if (file) { var fileSize = 0; if (file.size > 1024 * 1024) fileSize = (Math.round(file.size * 100 / (1024 * 1024)) / 100).toString() + 'MB'; else fileSize = (Math.round(file.size * 100 / 1024) / 100).toString() + 'KB'; document.getElementById('fileName').innerHTML = 'Name: ' + file.name; document.getElementById('fileSize').innerHTML = 'Size: ' + fileSize; document.getElementById('fileType').innerHTML = 'Type: ' + file.type; } } //上传文件 function uploadFile() { var fd = new FormData(); //关联表单数据,可以是自定义参数 fd.append("name", document.getElementById('name').value); fd.append("fileName", document.getElementById('fileName').files[0]); //监听事件 xhr.upload.addEventListener("progress", uploadProgress, false); xhr.addEventListener("load", uploadComplete, false); xhr.addEventListener("error", uploadFailed, false); xhr.addEventListener("abort", uploadCanceled, false); //发送文件和表单自定义参数 xhr.open("POST", "<%=path%>/user/uploadifyTest_doUpload"); xhr.send(fd); } //取消上传 function cancleUploadFile(){ xhr.abort(); } //上传进度 function uploadProgress(evt) { if (evt.lengthComputable) { var percentComplete = Math.round(evt.loaded * 100 / evt.total); document.getElementById('progressNumber').innerHTML = percentComplete.toString() + '%'; } else { document.getElementById('progressNumber').innerHTML = 'unable to compute'; } } //上传成功响应 function uploadComplete(evt) { //服务断接收完文件返回的结果 alert(evt.target.responseText); } //上传失败 function uploadFailed(evt) { alert("上传失败"); } //取消上传 function uploadCanceled(evt) { alert("您取消了本次上传."); } </script> </head> <body> <form id="form1" enctype="multipart/form-data" method="post" action="upload.php"> <p class="row"> <label for="fileToUpload">选择文件</label> <input type="file" name="fileName" id="fileName" onchange="fileSelected();"/> </p> <p id="fileName"></p> <p id="fileSize"></p> <p id="fileType"></p> <p class="row"> 上传者:<input type="text" name="name" id="name"/> <input type="button" onclick="uploadFile()" value="上传" /> <input type="button" onclick="cancleUploadFile()" value="取消" /> </p> <p id="progressNumber"></p> </form> </body> </html>
fd.append("name", document.getElementById('name').value);
fd.append("fileName", document.getElementById('fileName').files[0]);這兩句是把資料綁定到表單。因為html5支援多檔案上傳,所以
document.getElementById('fileName').files傳回的是陣列。這裡只有一個文件所以取下標0的元素。
xhr.upload.addEventListener("progress", uploadProgress, false);
##xhr.addEventListener("load", uploadComplete, false);
xhr.addEventListener("error", uploadFailed, false);
xhr.addEventListener("abort", uploadCanceled, false);這裡綁定進度、上傳、錯誤、中斷的事件,提供一些互動。檔案進度顯示就是在progress回呼中進行顯示的。 然後貼上後台程式碼和action配置,UploadifyTestAction.java
package com.bjhit.eranges.actions.test; import java.io.File; import com.opensymphony.xwork2.ActionSupport; public class UploadifyTestAction extends ActionSupport { private static final long serialVersionUID = 837481714629791752L; private File fileName; private String name; private String responseInfo; public String doUpload() throws Exception { System.out.println(name); File myFile = fileName; System.out.println(myFile.getName()); responseInfo = "上传成功!"; return "doUpload"; } public String getName() { return name; } public void setName(String name) { this.name = name; } public File getFileName() { return fileName; } public void setFileName(File fileName) { this.fileName = fileName; } public String getResponseInfo() { return responseInfo; } public void setResponseInfo(String responseInfo) { this.responseInfo = responseInfo; } }
<!-- 文件上传例子 --> <action name="uploadifyTest_*" class="com.bjhit.eranges.actions.test.UploadifyTestAction" method="{1}"> <result name="doUpload" type="json"> <param name="includeProperties">responseInfo</param> <param name="excludeNullProperties">true</param> </result> </action>
以上是HTML5+Ajax檔案上傳進度條顯示(圖文詳解)的詳細內容。更多資訊請關注PHP中文網其他相關文章!