HTML5 jQuery+FormData 异步上传文件，带进度条

1. <!DOCTYPE html>
2. <html>
3. <head>
4. <meta charset="UTF-8">
5. <link href="../resources/css/common.css" rel="stylesheet" />
6. <script src="../resources/js/jquery-2.1.4.js"></script>
7. </head>
8. <body>
9. <h2>HTML5异步上传文件，带进度条</h2>
10. <form method="post" enctype="multipart/form-data">
11. 其他需要提交的信息：<input type="text" name="otherInfo"/><br/><br/>
12. 选择要上传的文件：<br/>
13. <input type="file" name="file" /><span></span><br/>
14. <input type="file" name="file" /><span></span><br/>
15. </form>
16. <br/><br/>
17. <input type="button" value="上传吧" onclick="upload()"/>
18. <br/><br/>
19. 上传进度：<progress></progress><br/>
20. <p id="progress">0 bytes</p>
21. <p id="info"></p>
22. </body>
23. <script>
24. var totalSize = 0;
25. //绑定所有type=file的元素的onchange事件的处理函数
26. $(':file').change(function() {
27. var file = this.files[0]; //假设file标签没打开multiple属性，那么只取第一个文件就行了
28. name = file.name;
29. size = file.size;
30. type = file.type;
31. url = window.URL.createObjectURL(file); //获取本地文件的url，如果是图片文件，可用于预览图片
32. $(this).next().html("文件名：" + name + " 文件类型：" + type + " 文件大小：" + size + " url: " + url);
33. totalSize += size;
34. $("#info").html("总大小: " + totalSize + "bytes");
35. });
36. function upload() {
37. //创建FormData对象，初始化为form表单中的数据。需要添加其他数据可使用formData.append("property", "value");
38. var formData = new FormData($('form')[0]);
39. //ajax异步上传
40. $.ajax({
41. url: "http://localhost:8080/MyJavaStudio/servlet/file/upload",
42. type: "POST",
43. data: formData,
44. xhr: function(){ //获取ajaxSettings中的xhr对象，为它的upload属性绑定progress事件的处理函数
45. myXhr = $.ajaxSettings.xhr();
46. if(myXhr.upload){ //检查upload属性是否存在
47. //绑定progress事件的回调函数
48. myXhr.upload.addEventListener('progress',progressHandlingFunction, false);
49. }
50. return myXhr; //xhr对象返回给jQuery使用
51. },
52. success: function(result){
53. $("#result").html(result.data);
54. },
55. contentType: false, //必须false才会自动加上正确的Content-Type
56. processData: false  //必须false才会避开jQuery对 formdata 的默认处理
57. });
58. }
59. //上传进度回调函数：
60. function progressHandlingFunction(e) {
61. if (e.lengthComputable) {
62. $('progress').attr({value : e.loaded, max : e.total}); //更新数据到进度条
63. var percent = e.loaded/e.total*100;
64. $('#progress').html(e.loaded + "/" + e.total+" bytes. " + percent.toFixed(2) + "%");
65. }
66. }
67. </script>
68. </html>