菜单

FormData+Ajax实现上传进度督查,formdataajax

2018年12月18日 - Ajax

什么是FormData?

FormData+Ajax实现上传进度督查,formdataajax

什么是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实现上传进度督查,希望对大家有所协理,假如大家来任何疑窦请给我留言,小编会及时复苏大家之。在这多少个为异常感谢大家对帮客之家网站的襄助!

http://www.bkjia.com/AJaxjc/1232888.htmlwww.bkjia.comtruehttp://www.bkjia.com/AJaxjc/1232888.htmlTechArticleFormData+Ajax实现上传进度监控,formdataajax
什么是FormData? FormData对象足以组建一组用
XMLHttpRequest发送请求的键/值对。它可更灵活方便之发…

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实现上传进度督查,希望对我们享有助,即便我们发其他疑问请让自己留言,小编会及时回复我们的。在这吧非常感谢大家对台本的小网站的协理!

卿或许感兴趣之稿子:

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图