在html5以前，ajax上传文件算是一个比较麻烦的事，要是想显示一下上传进度就更不容易。遇到这种情况往往需要借助于第三方插件，比如jquery.fileupload.js。如今html5已经技术已经变成一个非常流行、非常新潮的技术了，各个浏览器厂商也实现了不少的html5规范，如今文件上传有了html5的支持已经变的相当容易了，我自己尝试了一下用javascript原生的api来实现ajax上传文件，为了页面不至于太丑，我使用了bootstrap的一些组件，先上效果图：
实现的功能介绍：
引用的类库：
页面：
<!DOCTYPE html> <html> <head> <title>使用html5特性进行ajax上传</title> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="this is my page"> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <script type="text/javascript" src="js/jquery-1.11.2.min.js"></script> <script type="text/javascript" src="js/bootstrap.min.js"></script> <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"> <style type="text/css"> body{ padding:20px; } </style> <script type="text/javascript"> function upload(){ if(!window.FormData){ $("#msg").html("你的浏览器不支持。"); $(".alert").show(); } //获得原生的form表单对象，等价于document.forms[0] var form = document.getElementById("uploadForm"); //单个文件超过400MB就不再上传 var hasError = false; $("input[type=‘file‘]", form).each(function(index,file){ if(file.files.length > 0){ if(file.files[0].size > 400*1024*1024){ $("#msg").html("单个文件不能超过400MB。"); $(".alert").show(); hasError = true; return; } } }); if(hasError){ return; } //构造FormData对象用于发送数据 var formData = new FormData(form); var xhr = new XMLHttpRequest(); xhr.open("post", form.action, true); //设置请求超时 xhr.upload.timeout = 2000; xhr.upload.ontimeout = function (event){ $("#msg").html("请求超时！"); $(".alert").show(); }; //添加progress事件 xhr.upload.addEventListener("progress",function(e){ $(".progress-bar").addClass("active"); var howMuch = e.loaded / e.total; var p = parseFloat((howMuch * 100).toFixed(2))+"%"; $(".progress-bar").css("width",p).html(p); }, false); //上传完成 xhr.upload.addEventListener("load", function(event){ $(".progress-bar").removeClass("active"); $("#msg").html("上传完成！"); $(".alert").show(); }, false); xhr.upload.addEventListener("error", function(event){ $(".progress-bar").removeClass("active"); $("#msg").html("上传出错！"); $(".alert").show(); }, false); xhr.upload.addEventListener("abort", function(event){ $(".progress-bar").removeClass("active"); $("#msg").html("您取消了本次上传。"); $(".alert").show(); }, false); xhr.send(formData); } //重置 function test(){ $("input[type=‘file‘]", document.forms[0]).each(function(index,file){ file.value = null; }); } </script> </head> <body> <div class="panel panel-primary"> <div class="panel-heading"> <h3 class="panel-title">文件上传</h3> </div> <div class="panel-body"> <div class="alert alert-danger alert-dismissable" style="display:none;"> <button type="button" class="close" onclick="$(‘.alert‘).hide();" aria-hidden="true"> × </button> <span id="msg"> 错误！请进行一些更改。</span> </div> <form id="uploadForm" action="/ajaxUpload/fileUpload" method="post" enctype="multipart/form-data"> <div class="input-group"> <span class="input-group-addon" id="basic-addon1">文件一</span> <input name="file1" type="file" class="form-control" aria-describedby="basic-addon1"> </div> <p></p> <div class="input-group"> <span class="input-group-addon" id="basic-addon2">文件二</span> <input id="file2" name="file2" type="file" class="form-control" aria-describedby="basic-addon2"> </div> <p></p> <div class="input-group"> <span class="input-group-addon" id="basic-addon3">文件三</span> <input name="file3" type="file" class="form-control" aria-describedby="basic-addon3"> </div> <p></p> <div class="progress"> <div class="progress-bar progress-bar-danger progress-bar-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100" style="width: 0%"> 0% </div> </div> </form> <div style="text-align: center;"> <button type="button" onclick="upload()" class="btn btn-primary" autocomplete="off"> 上传 </button> <button type="button" onclick="test()" class="btn btn-primary" autocomplete="off"> 重置 </button> </div> </div> </div> </body> </html>
后台处理上传请求的servlet：
1 package com.test.servlet; 2 3 import java.io.File; 4 import java.io.IOException; 5 import java.util.List; 6 7 import javax.servlet.ServletException; 8 import javax.servlet.http.HttpServlet; 9 import javax.servlet.http.HttpServletRequest; 10 import javax.servlet.http.HttpServletResponse; 11 import javax.servlet.http.Part; 12 13 import org.apache.catalina.core.ApplicationPart; 14 15 public class FileUploadServlet extends HttpServlet { 16 17 /** 18 * 19 */ 20 private static final long serialVersionUID = 4796039742918723240L; 21 22 @Override 23 protected void doGet(HttpServletRequest req, HttpServletResponse resp) 24 throws ServletException, IOException { 25 26 } 27 28 @Override 29 protected void doPost(HttpServletRequest req, HttpServletResponse resp) 30 throws ServletException, IOException { 31 req.setCharacterEncoding("utf-8"); 32 List<Part> parts = (List<Part>) req.getParts(); 33 for (Part part : parts) { 34 ApplicationPart p = (ApplicationPart) part; 35 if(p.getSize() != 0){ 36 String fileName = p.getSubmittedFileName(); 37 part.write("c:\\"+fileName); 38 } 39 } 40 } 41 }
web.xml :
1 <?xml version="1.0" encoding="UTF-8"?> 2 <web-app version="3.0" 3 xmlns="http://java.sun.com/xml/ns/javaee" 4 xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 5 xsi:schemaLocation="http://java.sun.com/xml/ns/javaee 6 http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd"> 7 <display-name></display-name> 8 <welcome-file-list> 9 <welcome-file>index.jsp</welcome-file> 10 </welcome-file-list> 11 <servlet> 12 <servlet-name>fileUploadServlet</servlet-name> 13 <servlet-class>com.test.servlet.FileUploadServlet</servlet-class> 14 <multipart-config /> 15 </servlet> 16 <servlet-mapping> 17 <servlet-name>fileUploadServlet</servlet-name> 18 <url-pattern>/fileUpload</url-pattern> 19 </servlet-mapping> 20 </web-app>
用到的html5新特性：
FormData对象是XMLHttpRequest Level 2中新增的一个对象，它不但可以传文本文件，还可以传送二进制文件。它可以如下方式来构造：
var formData = new FormData();
还可以直接将一个form对象传进去来构造（比如我上面的例子）：
var formData = new FormData(document.forms[0]); //构造完成后还可以动态添加表单元素 formData.append("yang","yangguo");//添加更多....
是不是很方便？
下面来介绍下XMLHttpRequest Level 2的XMLHttpRequest对象的新特性：
需要注意的是，如果是上传文件，使用的对象是xhr.upload对象，下载使用的对象xhr，不管是上传还是下载，与进度有关的事件如下：
我们这里用到load事件，传输完成后给用户提示信息：传输完成，我们还监听progress事件，通过progress事件上的事件对象event来获得传输数据进度：
1 //事件对象e 2 e.loaded //表示当前传输了多少个字节 3 e.total //表示当前传输的这个文件总共有多少个字节 4 //那么通过两数相除可以得到传输的百分比，保留小数点后两位有效数字 5 var howMuch = e.loaded / e.total; 6 var p = parseFloat((howMuch * 100).toFixed(2))+"%";
那么得到百分比我们就更新进度条就可以了。
XMLHttpRequest 2.0也添加了File API，通过File接口可以获得上传文件的大小，通过这个我们可以限制单个文件的大小。通过下面方式获得文件大小：
fileElement.files[0].size //文件大小，fileElement是一个<input type=‘file‘/>的DOM对象 //fileElement.files是一个FileList对象，因为只有第一个所以取第一个，为什么是个list呢，可能是支持拖拽式的文件上传拖拽多个文件进行上传
File继承自Blob，Blob代表一个不可更改的二进制文件对象（原文：A Blob object represents a file-like object of immutable, raw data），File继承自Blob的属性Blob.size 和Blob.type，其属性都是只读属性，File.size表示文件的总字节数，其自身属性还有：
我们使用size属性取得文件占用的字节数和400MB比较，大于400MB就不上传，提示文件过大。
另外还有还添加的还有FileReader来处理ajax传回的二进制数据，以后了再研究。
原文：http://www.cnblogs.com/yangguo/p/4340255.html