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

前端技术 2023/09/05 AJAX

原本打算使用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方式文件上传进度条实现方法有所帮助。

本文地址：https://www.stayed.cn/item/13857

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案