上传图片时显示进度条

什么是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() {
         var xhr = $.ajaxSettings.xhr(),
             time = new Date().getTime(),
             velocity = 0,
             loaded = 0;
         if (xhr.upload) {
             //添加 progress 事件监听
             xhr.upload.addEventListener('progress', function (e) {
                 var nowDate = new Date().getTime();
                 //每一秒刷新一次状态
                 if (nowDate - time >= 500) {
                     //已上传文件字节数/总字节数
                     percentage = parseInt(e.loaded / e.total * 100);
                     //console.log(percentage)
                     //当前已传大小(字节数)-一秒前已传文件大小(字节数)
                     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) {
         //失败回调    
     }
 });

转载至https://www.jb51.net/article/127507.htm
另一篇参考https://blog.csdn.net/qq_35534449/article/details/80811308