HTML5 Ajax檔案上傳進度條如何顯示

HTML5 Ajax檔案上傳進度條如何顯示_AJAX相關

最後更新：2017-01-18 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

原本打算使用jquery外掛程式進行非同步檔案上傳，比如uploadfy但是需要額外的支援，也有人用iframe模仿非同步上傳機制，感覺都比較彆扭。因為項目不考慮低版本瀏覽器，所以決定用html5實現。下面只是一個簡單的demo，具體樣式需要自己去做。
後台基於strut2進行檔案處理，具體因項目而定。只是要注意設定檔案大小的限制。 <constant name="struts.multipart.maxSize" value="52428800"/>這個配置根據具體情況設定，超過此值會報404.
首先是上傳頁面,比較簡單，附帶了檔案上者這個參數。

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"><div class="row">  <label for="fileToUpload">選擇檔案</label><input type="file" name="fileName" id="fileName" onchange="fileSelected();"/> </div><div id="fileName"></div><div id="fileSize"></div><div id="fileType"></div><div class="row">上傳者：<input type="text" name="name" id="name"/><input type="button" onclick="uploadFile()" value="上傳" /><input type="button" onclick="cancleUploadFile()" value="取消" /> </div><div id="progressNumber"></div></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配置

<!-- 檔案上傳例子 --><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>

這樣基本的上傳功能就實現了。

感謝大家的閱讀，希望本文所述對大家學習Ajax方式檔案上傳進度條實現方法有所協助。

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More