FormData+Ajax实现上传进度监控_Ajax

FormData+Ajax实现上传进度监控

什么是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实现上传进度监控，希望对大家有所帮助