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

更新时间：2016年04月18日 15:39:13 投稿：lijiao

这篇文章主要介绍了HTML5 Ajax文件上传进度条是如何显示的，基于原生html5实现，不需要falsh支持，进度可以自定义显示，控制灵活，感兴趣的小伙伴们可以参考一下

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

您可能感兴趣的文章:

Ajax跨域查询完美解决通过$.getJSON()实现
浏览器安全上做了限制，禁止ajax跨域获得数据，可以通过jquery提供的$.getJSON()可以跨域获得JSON格式的数据，具体的实现如下，感兴趣的朋友可以参考下哈，希望对大家有所帮助
2013-06-06
Ajax核心XMLHttpRequest总结
本文主要是给大家总结了一下Ajax的核心内容XMLHttpRequest的相关知识，十分的详细，推荐给大家，需要的小伙伴参考下。
2015-02-02
聊一聊数据请求中Ajax、Fetch及Axios的区别
axios、fetch和ajax的区别在网络上存在很多文章,下面这篇文章也是给大家介绍了关于数据请求中Ajax、Fetch及Axios区别的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
2022-02-02
菜鸟蔡之Ajax复习第三篇(Ajax之无刷新登录)
无刷新登录大家也许没写过，但是一定都是听说过的，很早以前就想用这个小技术在自己做的小项目中用一把了，但都没有付出过实践，在网上查也没有查到具体完整的代码，在这里，今天菜鸟蔡也来试了一把，献丑了，希望对初学的童鞋有点帮助
2012-11-11
$.ajax中的contentType使用解读
这篇文章主要介绍了$.ajax中的contentType使用,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2023-12-12
ajax中data传参的两种方式分析
这篇文章主要介绍了ajax中data传参的两种方式,结合实例形式简单分析了ajax参数传递的POST与GET方式,非常简单实用,需要的朋友可以参考下
2015-12-12
jQuery Ajax 实例详解 ($.ajax、$.post、$.get)
本文给大家分享jquery ajax实例文章，由于jquery在异步提交方面封装的非常好，直接用ajax非常麻烦，jquery大大简化了我们的操作，不用考虑浏览器的问题了。对jquery ajax实例相关介绍感兴趣的朋友一起学习吧
2015-11-11
ajax接收Date类型的数据时会把数据转换为时间戳
ajax接收Date类型的数据时将会把数据转换为时间戳，下面是具体的示例，大家可以参考下
2014-05-05
建一个XMLHttpRequest对象池
建一个XMLHttpRequest对象池...
2007-04-04
将xml文件作为一个小的数据库,进行学生的增删改查的简单实例
下面小编就为大家带来一篇将xml文件作为一个小的数据库,进行学生的增删改查的简单实例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2016-06-06

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

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具