页面技术：HTML5 + AJAX (
jQuery)
后台技术：Servlet 3.0
服务器：Tomcat 7.0
jQuery版本：1.9.1
Servlet 3.0
代码
packageorg.ajaxfileupload.servlet;importjava.io.File;importjava.io.IOException;importjava.util.Collection;importjava.util.Iterator;importjava.util.regex.Matcher;importjava.util.regex.Pattern;importjavax.servlet.ServletException;importjavax.servlet.annotation.MultipartConfig;importjavax.servlet.annotation.WebServlet;importjavax.servlet.http.HttpServlet;importjavax.servlet.http.HttpServletRequest;importjavax.servlet.http.HttpServletResponse;importjavax.servlet.http.Part;
@WebServlet(description= "文件上传", urlPatterns = { "/upload"})@MultipartConfig( maxFileSize= 1024 *1024 *100 , fileSizeThreshold = 819200)public class FileUploadServlet extendsHttpServlet {private static final long serialVersionUID = 1L;private String fileNameExtractorRegex = "filename=\".+\"";publicFileUploadServlet() {super();
}protected voiddoGet(HttpServletRequest request,
HttpServletResponse response)throwsServletException, IOException {
doPost(request, response);
}protected voiddoPost(HttpServletRequest request,
HttpServletResponse response)throwsServletException, IOException {
request.setCharacterEncoding("utf-8");
response.setCharacterEncoding("utf-8");
response.setContentType("text/html;charset=utf-8");
String savePath= request.getServletContext().getRealPath("/upload");
Collection parts =request.getParts();//遍历所有的表单内容，将表单中的文件写入上传文件目录
for (Iterator iterator =parts.iterator(); iterator.hasNext();) {
Part part=iterator.next();//从Part的content-disposition中提取上传文件的文件名
String fileName =getFileName(part);if (fileName != null) {
part.write( savePath+ File.separator +fileName);
}
}
response.getWriter().write("true");
response.getWriter().close();
}
privateString getFileName(Part part) {
String fileName= null;//获取header信息中的content-disposition，如果为文件，则可以从其中提取出文件名
String cotentDesc = part.getHeader("content-disposition");
Pattern pattern=Pattern.compile(fileNameExtractorRegex);
Matcher matcher=pattern.matcher(cotentDesc);if(matcher.find()) {
fileName=matcher.group();
fileName= fileName.substring(10, fileName.length() - 1);
}returnfileName;
}
}
前台
首先HTML5用AJAX提交数据先要学习一个HTML5新增加的对象：FormData
FormData 对象可以使用append 方法进行 key -
value的数据添加，与以前我们常用的json不同的就是可以异步上传二进制文件。
1、FormDate对象的创建
var formData = new FormData();
2、向 FormDate 对象添加数据
formData.append("catname", "我是一只喵");
formData.append("age", 1); //数字类型会转为字符串类型
//可以增加上传的二进制文件，比如fileInputElement对象中已经包含了用户所选择的文件
formData.append("userfile", fileInputElement.files[0]);
//也可以将一个 Blob 对象添加到 formData 中var oFileBody = "hey!";
var oBlob = new Blob([oFileBody], { type: "text/xml"});
formData.append("webmasterfile", oBlob);
3、使用 FormData 对象
var xhr = newXMLHttpRequest();
xhr.open("POST", "upload");
xhr.send(formData);
HTML部分
FormData
对象简单的介绍完毕后，我们来看看页面的HTML代码是怎么写的
<imgwidth="400"height="250"/><br/>
<inputtype="file"id="pic"name="pic"οnchange="showPic()"/>
<inputtype="button"value="上传图片"οnclick="uploadFile()" /><br/>
<divid="parent">
<divid="son">div>
div>
最下面的div是用来显示进度条的，所以需要对应的css样式。样式如下，颜色不好看，自己改吧：
JS部分
重头戏来了，在页面上加载上jquery后我们来看
JavaScript 是怎么写的，首先是 file 组件的 onchange事件方法：
functionshowPic(){var pic = $("#pic").get(0).files[0];
$("img").prop("src", window.URL.createObjectURL(pic) );
}
showPic的第一行是从 file 对象得到上传文件
。 第二行则为 img 设置了src属性。 可以在页面中得到即时预览的效果。
在看 uploadFile
方法之前，再让我们简单学习一下进度事件 (Progress Events )的progress 吧 ......
Progress
Events规范是W3C的一个工作草案，定义了与客户端服务器通信有关的事件。这些事件最早其实值针对XHR操作，但目前也被其它API借鉴。有以下6个进度事件。
loadstart：在接收到相应数据的第一个字节时触发。
progress：在接收相应期间持续不断触发。 //我们就只看着一个好了
error：在请求发生错误时触发。
abort：在因为调用abort()方法而终止链接时触发。
load：在接收到完整的相应数据时触发。
loadend：在通信完成或者触发error、abort或load事件后触发。
progress事件是Mozilla提交的，这个事件会在浏览器接收新数据期间周期性地触发。而onprogress事件处理程序会接收到一个event对象，其target属性是XHR对象，但包含着三个额外的属性：
lengthComputable ：表示进度信息是否可用的布尔值
position ：表示已经接收的字节数
totalSize
：表示根据Content-Length相应头部确定的预期字节数。
有了这些信息，我们就可以为用户创建一个进度指示器了。但是 问题又来了，
jQuery的 ajax 方法没有关于 progress 事件的操作。这怎么玩~~
好在通过查阅资料发现，jQuery的ajax方法调用的XMLHttpRequest对象是可以指定的！！！
看
8453行，就是它了。于是 uploadFile
方法的ajax部分的时候代码就变成了这个样式。
最重要的部分代码：
functionuploadFile(){// 获取上传文件，放到 formData对象里面
var pic = $("#pic").get(0).files[0];var formData = newFormData();
formData.append("file", pic);$.ajax({
type:"POST",
url:"upload",
data: formData , //这里上传的数据使用了formData 对象
processData :false,//必须false才会自动加上正确的Content-Type
contentType : false,
//这里我们先拿到jQuery产生的 XMLHttpRequest对象，为其增加 progress 事件绑定，然后再返回交给ajax使用
xhr:function(){var xhr =$.ajaxSettings.xhr();if(onprogress &&xhr.upload) {
xhr.upload.addEventListener("progress" , onprogress, false);returnxhr;
}
}
});
}
最后加上 onprogress
方法，为整个功能花上个句号。
functiononprogress(evt){var loaded = evt.loaded; //已经上传大小情况
var tot = evt.total; //附件总大小
var per = Math.floor(100*loaded/tot); //已经上传的百分比
$("#son").html( per +"%");
$("#son").css("width" , per +"%");
}
最后附上整个页面的代码，方便对比。
DOCTYPE html>
<html>
<head>
<title>html5_2.htmltitle>
<metahttp-equiv="content-type"content="text/html; charset=UTF-8">
<styletype="text/css">#parent{width:550px;height:10px;border:2px solid #09F;}#son{width:0;height:100%;background-color:#09F;text-align:center;line-height:10px;font-size:20px;font-weight:bold;}
style>
<scripttype="text/javascript"src="js/jquery-1.9.1.js">script>
<scripttype="text/javascript">
functionshowPic(){varpic=$("#pic").get(0).files[0];
$("img").prop("src", window.URL.createObjectURL(pic) );
uploadFile();
}functionuploadFile(){varpic=$("#pic").get(0).files[0];varformData= newFormData();
formData.append("file", pic);$.ajax({
type:"POST",
url:"upload",
data: formData ,
processData :false,//必须false才会自动加上正确的Content-Type
contentType :false,
xhr:function(){varxhr=$.ajaxSettings.xhr();if(onprogress&&xhr.upload) {
xhr.upload.addEventListener("progress", onprogress,false);returnxhr;
}
}
});
}
functiononprogress(evt){varloaded=evt.loaded;//已经上传大小情况
vartot=evt.total;//附件总大小
varper=Math.floor(100*loaded/tot);//已经上传的百分比
$("#son").html( per+"%");
$("#son").css("width", per+"%");
}script>
head>
<body>
<imgwidth="400"height="250"/><br/>
<inputtype="file"id="pic"name="pic"οnchange="showPic()"/>
<inputtype="button"value="上传图片"οnclick="uploadFile()" /><br/>
<divid="parent">
<divid="son">div>
div>
body>
html>
521
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
