1.Ajax上传文件
如果动态上传文件并获取信息,则需使用Ajax上传。
html代码:
<form id="fileUpload" enctype="multipart/form-data">
<input type="file" name="file">选择文件
</form>
<input id="submit" type="button" value="确认上传" />
Js代码:
$("#submit").click(function () {
var formData = new FormData(document.getElementById("fileUpload"));
$.ajax({
type: "POST",
url: "/upload",
data: formData,
processData: false,
contentType: false,
error: function (data) {
console.log("上传失败!")
},
success: function (data) {
console.log("上传成功!")
},
});
});
注意:我们可以使用FormData来组合表单中的数据
- 如果是普通数据,则组合为&name=value的形式。
- 如果是文件数据,则会生成相应的文件流进行上传
2.上传过程中获取信息
在文件上传过程中,我们可以通过对ajax的xhr属性注册回调事件的方法来获取上传信息。
Js代码:
$("#submit").click(function () {
var formData = new FormData(document.getElementById("fileUpload"));
$.ajax({
type: "POST",
url: "/upload",
data: formData,
processData: false,
contentType: false,
error: function (data) {
console.log("上传失败!")
},
success: function (data) {
console.log("上传成功!")
},
xhr: function () {
//获取xhr对象
var xhr = $.ajaxSettings.xhr();
//检查是否在上传文件
if (xhr.upload) {
//绑定progress事件的回调函数
xhr.upload.addEventListener('progress', progressHandle, false);
}
//xhr对象返回给jQuery使用
return xhr;
}
});
});
function progressHandle(event) {
console.log("总大小:"+ event.total + " 已上传:" + event.loaded);
}
通过xhr.upload.addEventListener(‘progress’, progressHandle, false)方法我们
就可以获取到相应的数据:
- 其中event.total为文件的总大小,单位为:“b”
- 其中event.loaded为已上传的大小,单位为:“b”
3.计算进度,速度,剩余时间
progressHandle(event)回调在每次文件上传信息变化后都会自动执行,我们只需要根据信息计算相应的结果即可。
Js代码:
var lastTime = 0;//上一次计算时间
var lastSize = 0;//上一次计算的文件大小
function progressHandle(event) {
/*计算间隔*/
var nowTime = new Date().getTime();
var intervalTime = (nowTime - lastTime)/1000;//时间单位为毫秒,需转化为秒
var intervalSize = event.loaded - lastSize;
/*重新赋值以便于下次计算*/
lastTime = nowTime;
lastSize = event.loaded;
/*计算速度*/
var speed = intervalSize/intervalTime;
var bSpeed = speed;//保存以b/s为单位的速度值,方便计算剩余时间
var units = 'b/s';//单位名称
if(speed/1024>1){
speed = speed/1024;
units = 'k/s';
}
if(speed/1024>1){
speed = speed/1024;
units = 'M/s';
}
/*计算剩余时间*/
var leftTime = ((event.total - event.loaded) / bSpeed);
/*计算进度*/
var progress = event.loaded/event.total * 100;
console.log("当前进度:" + progress.toFixed(1) + "% 当前速度:" + speed.toFixed(1) + units +" 预计剩余时间:" + leftTime.toFixed(1) + "秒");
}
因为没有初始化赋值,所以第一次获取的数据有些问题,有需要的话可以通过赋初值的方法进行修正,或者直接跳过错误值!
Js代码:
function progressHandle(event) {
/*验证数据*/
if(lastTime == 0)
{
lastTime = new Date().getTime();
lastSize = event.loaded;
return;
}
/*计算间隔*/
var nowTime = new Date().getTime();
var intervalTime = (nowTime - lastTime)/1000;//时间单位为毫秒,需转化为秒
var intervalSize = event.loaded - lastSize;
/*重新赋值以便于下次计算*/
lastTime = nowTime;
lastSize = event.loaded;
/*计算速度*/
var speed = intervalSize/intervalTime;
var bSpeed = speed;//保存以b/s为单位的速度值,方便计算剩余时间
var units = 'b/s';//单位名称
if(speed/1024>1){
speed = speed/1024;
units = 'k/s';
}
if(speed/1024>1){
speed = speed/1024;
units = 'M/s';
}
/*计算剩余时间*/
var leftTime = ((event.total - event.loaded) / bSpeed);
/*计算进度*/
var progress = event.loaded/event.total * 100;
console.log("当前进度:" + progress.toFixed(1) + "% 当前速度:" + speed.toFixed(1) + units +" 预计剩余时间:" + leftTime.toFixed(1) + "秒");
}
功能点全部完成!