html ajax 上传进度条,基于HTML5 Ajax实现文件上传并显示进度条

本文实例讲解了ajax上传文件及进度条的实现方法，分享给大家供大家参考，具体内容如下

效果图：

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

1.上传文件：

首先我们用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添加上传中的监听事件，可以得到已上传的文件大小，用以实现进度条的显示。

//监听事件

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

完整代码如下：

进度条测试

0%

var file = null;

$(function(){

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

upload();

});

});

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

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

input.addEventListener('change',readFile,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", uploadProgress, 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");

}

}

以上就是关于ajax实现带进度条的文件上传全部内容，希望对大家的学习有所帮助。