FormData+Ajax implements upload progress monitoring

The FormData type is actually defined at XMLHttpRequest level 2. It provides convenience for serializing tables and creating data in the same format as the form (for XHR transmission, of course). Next, I will share with you FormData Ajax to implement upload progress monitoring through this article. Friends who need it can take a look together

What is FormData?

The FormData object can assemble a set of key/value pairs used to send requests using XMLHttpRequest. It makes sending form data more flexible and convenient because it can be used independently of the form. If you set the encoding type of the form to multipart/form-data, the data format transmitted through FormData is the same as the data format transmitted by the form through the submit() method;

How to create a FormData object

You can create a FormData object yourself and then add fields by calling its append() method, like this:

//实例化一个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 = &#39;<a id="a"><b id="b">hey!</b></a>&#39;; // 新文件的正文...
var blob = new Blob([content], { type: "text/xml"});
formData.append("webmasterfile", blob);

Note: The field "userfile " and "webmasterfile" both contain a file. The field "userid" is of numeric type, which will be converted to a string type by the FormData.append() method (the field type of the FormData object can be Blob, File, or string: If its If the field type is neither Blob nor File, it will be converted to a string type.

Use jQuery's Ajax method to send FormData data

//记录当前时间
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) {
  //失败回调    
 }
});

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Related articles:

ajaxfileupload.js implements file upload (with steps Code)

php Get the headers method and content instance of ajax

ajaxfileupload. js to implement file upload (with step code)

The above is the detailed content of FormData+Ajax implements upload progress monitoring. For more information, please follow other related articles on the PHP Chinese website!