ajax 上传图片进度条,【Ajax】ajax上传文件及进度条的实现

html5上传是同步上传的方式，所以能够实现进度条的显示。

首先我们用ajax来取得的file对象：

var file = null;

var input = $("#file_upload");

//文件域选择文件时,执行readFile函数

input.addEventListener('change',readFile,false);

function readFile(){

file = this.files[0];

}

然后用FormData()送到后台。

var fd = new FormData();

fd.append("file",file);

2.监听事件：给XMLHttpRequest添加上传中的监听事件，可以得到已上传的文件大小，用以实现进度条的显示。

//监听事件

xhr.upload.addEventListener("progress",uploadProgress,false);

完整代码如下：

进度条测试

0%

var file = null;

$(function(){

$("#upload").click(function(){

upload();

});

});

var input = document.getElementById("file_upload");

//文件域选择文件时,执行readFile函数

input.addEventListener('change',false);

function readFile(){

file = this.files[0];

}

//上传文件

function upload(){

var xhr = new XMLHttpRequest();

var fd = new FormData();

fd.append("fileName",file);

//监听事件

xhr.upload.addEventListener("progress",false);

//发送文件和表单自定义参数

xhr.open("POST","../UploadServlet",true);

xhr.send(fd);

}

function uploadProgress(evt){

if (evt.lengthComputable) {

//evt.loaded：文件上传的大小 evt.total：文件总的大小

var percentComplete = Math.round((evt.loaded) * 100 / evt.total);

//加载进度条，同时显示信息

$("#percent").html(percentComplete + '%')

$("#progressNumber").css("width",""+percentComplete+"px");

}

}

效果如下：

Author：立礼

Sign：人生不要有太多的幻想，而要有更多的行动

总结

如果觉得编程之家网站内容还不错，欢迎将编程之家网站推荐给程序员好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。