未加星标

FormData+Ajax实现上传进度监控

字体大小 | |
[前端(javascript) 所属分类 前端(javascript) | 发布者 店小二03 | 时间 | 作者 红领巾 ] 0人收藏点击收藏

什么是FormData?

FormData对象可以组装一组用 XMLHttpRequest发送请求的键/值对。它可以更灵活方便的发送表单数据,因为可以独立于表单使用。如果你把表单的编码类型设置为multipart/form-data ,则通过FormData传输的数据格式和表单通过submit() 方法传输的数据格式相同;

如何创建一个FormData对象

你可以自己创建一个FormData对象,然后通过调用它的append()方法添加字段,就像这样:

//实例化一个formData对象
var formData = new FormData();
formData.append("username", "Groucho");
formData.append("userid", 123456); // 数字 123456 会被立即转换成字符串 "123456"
// HTML上的 文件类型input[type=file]的文件框,由用户选择
formData.append("userfile", fileInputElement.files[0]);
// javascript file-like 对象
var content = '<a id="a"><b id="b">hey!</b></a>'; // 新文件的正文...
var blob = new Blob([content], { type: "text/xml"});
formData.append("webmasterfile", blob);
注意:字段 “userfile” 和 “webmasterfile” 都包含一个文件. 字段 “userid” 是数字类型,它将被FormData.append()方法转换成字符串类型(FormData 对象的字段类型可以是 Blob, File, 或者 string: 如果它的字段类型不是Blob也不是File,则会被转换成字符串类型。

使用jQuery的Ajax方法发送FormData数据

//记录当前时间
var time=new Date().getTime();
//记录当前进度
var percentage =null;
//记录当前上传速度
var velocity=null;
//记录已上传文件字节大小
var loaded=0;
$.ajax({
url: 'Url',
type: "POST",
data: formData,
contentType: false, // 必须 不设置内容类型
processData: false, // 必须 不处理数据
xhr: function xhr() {
//获取原生的xhr对象
var xhr = $.ajaxSettings.xhr();
if (xhr.upload) {
//添加 progress 事件监听
xhr.upload.addEventListener('progress', function (e) {
var nowDate = new Date().getTime();
//每一秒刷新一次状态
if (nowDate - time >= 1000) {
//已上传文件字节数/总字节数
percentage = parseInt(e.loaded / e.total * 100);
//当前已传大小(字节数)-一秒前已传文件大小(字节数)
velocity = (e.loaded - loaded) / 1024;
if (percentage >= 99) {
$(".hintText").html('服务端正在解析,请稍后');
} else {
//修改上次记录时间及数据大小
time = nowDate;
loaded = e.loaded;
}
} else {
return;
}
}, false);
}
return xhr;
},
success: function success(response) {
//成功回调
},
error: function error(error) {
//失败回调
}
});

总结

以上所述是小编给大家介绍的FormData+Ajax实现上传进度监控,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

本文前端(javascript)相关术语:javascript是什么意思 javascript下载 javascript权威指南 javascript基础教程 javascript 正则表达式 javascript设计模式 javascript高级程序设计 精通javascript javascript教程

主题: AjaxJavaScriptXMLHTMLjQueryJava数据谢大
分页:12
转载请注明
本文标题:FormData+Ajax实现上传进度监控
本站链接:http://www.codesec.net/view/568432.html
分享请点击:


1.凡CodeSecTeam转载的文章,均出自其它媒体或其他官网介绍,目的在于传递更多的信息,并不代表本站赞同其观点和其真实性负责;
2.转载的文章仅代表原创作者观点,与本站无关。其原创性以及文中陈述文字和内容未经本站证实,本站对该文以及其中全部或者部分内容、文字的真实性、完整性、及时性,不作出任何保证或承若;
3.如本站转载稿涉及版权等问题,请作者及时联系本站,我们会及时处理。
登录后可拥有收藏文章、关注作者等权限...
技术大类 技术大类 | 前端(javascript) | 评论(0) | 阅读(21)