[JavaScript]_[初级]_[不使用JQuery原生Ajax提交表单文件并监听进度]

r.upload.addEventListener('progress', function (e) {
      var progressRateInt = parseInt(e.loaded * 100 / e.total);
      var progress = document.getElementById("myProgress");
      progress.value = progressRateInt;
      var percent = document.getElementById("percent");
      percent.innerHTML = progressRateInt+"%";
});
1
2
3
4
5
6
7

4. 发送文件表单里的其他输入框数据，不再需要把FormData的值提取出来组合成key1=value1&key2=value2...的形式。可直接发送。具体的项目例子可以看我的JavaWeb学院课程^[6]开发JavaWeb网站精讲-基于JFinal框架的第四章第2课时。

const oData = new FormData(form);
r.send(oData);
1
2

例子

function asyncSubmit(form,action){

    const oData = new FormData(form);
    var progress = document.getElementById("myProgress");
    progress.value = 0;

    var r = new XMLHttpRequest();
    r.open("POST", action,true);
    r.onreadystatechange = function () {
        if (r.readyState != 4 || r.status != 200) return;

        var data = JSON.parse(r.responseText);
        if(data.status == 1){

            if(data.message.length > 0){
                var imgPath = JSON.parse(data.message);
                if(imgPath.bannerImg){
                    var bannerImg = document.getElementById("bannerImg");
                    bannerImg.value = imgPath.bannerImg;

                    var imgUrl = document.getElementById("img_url");
                    imgUrl.href = "/upload/"+imgPath.bannerImg;
                }
            }
        }else{
            alert("Submit error.");
        }
    };

    r.upload.addEventListener('progress', function (e) {
          var progressRateInt = parseInt(e.loaded * 100 / e.total);
          var progress = document.getElementById("myProgress");
          progress.value = progressRateInt;
          var percent = document.getElementById("percent");
          percent.innerHTML = progressRateInt+"%";
    });

    r.send(oData);
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

参考

1. 进度条 ProgressEvent - Web APIs | MDN

2. XMLHttpRequest - Web APIs | MDN

3. Sending form data - Learn web development | MDN

4. JavaScript HTML DOM EventListener

5. 不使用JQuery如何提交Ajax的表单请求

6. 开发JavaWeb网站精讲-基于JFinal框架