HTML5 Ajax文件上传进度条如何显示

2024-09-01 08:28:04

字体：大中小

来源：转载

供稿：网友

原本打算使用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>

上一篇：Ajax教程实例详解

下一篇：AJAX XMLHttpRequest对象详解