FormData+Ajax实现上传进度监控
来源:互联网 发布:mysql主从复制原理5.7 编辑:程序博客网 时间:2024/06/13 08:30
什么是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) { //失败回调 }});
阅读全文
0 0
- FormData+Ajax实现上传进度监控
- ajax+FormData实现图片上传
- html5+FormData 实现ajax文件上传
- Ajax+FormData实现无刷新附件上传
- FormData实现ajax方式文件上传
- H5 formData实现批量ajax上传文件
- 通过AJAX监控文件上传进度
- 通过ajax上传formdata
- FormData ajax 上传
- AJAX加FormDaTA实现文件上传[laravel框架下实现]
- 利用Ajax FormData实现无刷新带进度条文件上传
- Ajax使用FormData对象实现无刷新上传文件
- Ajax+FormData实现大附件上传带进度条
- Ajax 使用formdata 实现 无刷新表单上传
- 实现无刷新上传文件,使用FormData进行Ajax请求
- 原生js利用ajax、FormData对象实现进度条上传
- ajax 利用formdata对象 实现多文件上传
- ajax结合formdata实现往服务器上传文件
- Android okhttp3的基本使用
- Kafka设计解析(四)- Kafka Consumer设计解析
- Java从证书库文件中导出RSA公钥私钥
- 如何解决手机网站的自适应问题
- SpringBoot自动重启、热启动
- FormData+Ajax实现上传进度监控
- 环境变量和JDK不想一致时,eclipse.ini文件配置启动JDK
- C#重绘OnPaint()事件调用机制
- 奇数下标都是奇数或者偶数下标都是偶数
- 3D数学基础知识
- cms01---cms-parent maven的父项目
- nginx 配置https访问以及访问http跳转到https
- 2017年第4届中国西部门窗博览会会刊(参展商名录)
- Python 变量的操作