<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <script src="../js/jquery.js"></script> </head> <body> <h2>HTML5异步上传文件，带进度条(jQuery)</h2> <form method="post" enctype="multipart/form-data"><br/><br/> 选择要上传的文件：<br/> <input type="file" name="file"/><span></span><br/> <!--<input type="file" name="file"/><span></span><br/>--> </form> <br/><br/> <input type="button" value="提交" onclick="upload()" id="sub"/> <br/><br/> 上传进度： <progress></progress> <br/> <p id="progress">0 bytes</p> <p id="info"></p> </body> <script> var totalSize = 0; //绑定所有type=file的元素的onchange事件的处理函数 $(':file').change(function () { var file = this.files[0]; //假设file标签没打开multiple属性，那么只取第一个文件就行了 var name = file.name; var size = file.size; var type = file.type; url = window.URL.createObjectURL(file); //获取本地文件的url，如果是图片文件，可用于预览图片 console.log(url); $(this).next().html("文件名：" + name + " 文件类型：" + type + " 文件大小：" + size + " url: " + url); totalSize += size; $("#info").html("总大小: " + totalSize + "bytes"); }); function upload() { //创建FormData对象，初始化为form表单中的数据。需要添加其他数据可使用formData.append("property", "value"); var formData = new FormData($('form')[0]); //ajax异步上传 $.ajax({ url: "/getFile", method: "POST", data: formData, xhr: function () { //获取ajaxSettings中的xhr对象，为它的upload属性绑定progress事件的处理函数 var myXhr = $.ajaxSettings.xhr(); if (myXhr.upload) { //检查upload属性是否存在 //绑定progress事件的回调函数 myXhr.upload.addEventListener('progress', progressHandlingFunction, false); } return myXhr; //xhr对象返回给jQuery使用 }, success: function (result) { $("#result").html(result.data); }, contentType: false, //必须false才会自动加上正确的Content-Type processData: false //必须false才会避开jQuery对 formdata 的默认处理 }); } //上传进度回调函数： function progressHandlingFunction(e) { if (e.lengthComputable) { $('progress').attr({value: e.loaded, max: e.total}); //更新数据到进度条 var percent = e.loaded / e.total * 100; $('#progress').html(e.loaded + "/" + e.total + " bytes. " + percent.toFixed(2) + "%"); } } </script> </html>
结果：
