这次给大家带来jquery+html5+ajax实现带有进度条的文件上传功能，jquery+html5+ajax实现带有进度条文件上传功能的注意事项有哪些，下面就是实战案例，一起来看一下。
首先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 = <a id="a"><b id="b">hey!</b></a>;
var oblob = new blob([ofilebody], { type: text/xml});
formdata.append(webmasterfile, oblob);
3、使用 formdata 对象
var xhr = new xmlhttprequest();
xhr.open(post, upload);
xhr.send(formdata);
html部分
formdata 对象简单的介绍完毕后，我们来看看页面的html代码是怎么写的
<img width="400" height="250"/><br />
<input type="file" id="pic" name="pic" onchange="showpic()"/>
<input type="button" value="上传图片" onclick="uploadfile()" /><br />
<p id="parent">
<p id="son"></p>
</p>
最下面的p是用来显示进度条的，所以需要对应的css样式。样式如下，颜色不好看，自己改吧：
<style type="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>
js部分
重头戏来了，在页面上加载上jquery后我们来看 javascript 是怎么写的，首先是 file 组件的 onchange事件方法：
function showpic(){
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部分的时候代码就变成了这个样式。
最重要的部分代码：
function uploadfile(){
// 获取上传文件，放到 formdata对象里面
var pic = $(#myhead).get(0).files[0];
var formdata = new formdata();
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);
return xhr;
}
}
});
}
最后加上 onprogress 方法，为整个功能花上个句号。
/**
* 侦查附件上传情况 ,这个方法大概0.05-0.1秒执行一次
*/
function onprogress(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.html</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<style type="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>
<script type="text/javascript" src="js/jquery-1.9.1.js"></script>
<script type="text/javascript">
function showpic(){
var pic = $(#pic).get(0).files[0];
$(img).prop(src , window.url.createobjecturl(pic) );
uploadfile();
}
function uploadfile(){
var pic = $(#pic).get(0).files[0];
var formdata = new formdata();
formdata.append(file , pic);
/**
* 必须false才会避开jquery对 formdata 的默认处理
* xmlhttprequest会对 formdata 进行正确的处理
*/
$.ajax({
type: post,
url: upload,
data: formdata ,
processdata : false,
//必须false才会自动加上正确的content-type
contenttype : false ,
xhr: function(){
var xhr = $.ajaxsettings.xhr();
if(onprogress && xhr.upload) {
xhr.upload.addeventlistener(progress , onprogress, false);
return xhr;
}
}
});
}
/**
* 侦查附件上传情况 ,这个方法大概0.05-0.1秒执行一次
*/
function onprogress(evt){
var loaded = evt.loaded; //已经上传大小情况
var tot = evt.total; //附件总大小
var per = math.floor(100*loaded/tot); //已经上传的百分比
$(#son).html( per +% );
$(#son).css(width , per +%);
}
</script>
</head>
<body>
<img width="400" height="250"/><br />
<input type="file" id="pic" name="pic" onchange="showpic()"/>
<input type="button" value="上传图片" onclick="uploadfile()" /><br />
<p id="parent">
<p id="son"></p>
</p>
</body>
</html>
相信看了本文案例你已经掌握了方法，更多精彩请关注其它相关文章！
推荐阅读：
jquery+ligerui实现文件上传步骤详解
jquery动态加载js文件详解
jquery怎么读取xml文件内容
以上就是jquery+html5+ajax实现带有进度条的文件上传功能的详细内容。