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

Posted infoworld

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了[JavaScript]_[初级]_[不使用JQuery原生Ajax提交表单文件并监听进度]相关的知识,希望对你有一定的参考价值。

场景

  1. 不可否认,使用JQuery来提交表单文件还是比较方便的。问题是JQuery性能问题,去掉JQuery如何提交文件,并且监听文件的提交进度?

说明

  1. 提交表单文件<form enctype="multipart/form-data"...需要增加enctype="multipart/form-data"的属性,不然无法提交成功。

  2. 使用原生XMLHttpRequest技术提交文件时, 是不需要设置Content-Type[5]的。

  3. 对上传文件进行进度监听,是需要监听XMLHttpRequest的属性uploadprogress[1]事件的。ProgressEvent的两个关键值loaded表示底层已经处理的字节数,单位是64位无符号整型,另一个total表示底层需要处理的总字节数。

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. 发送文件表单里的其他输入框数据,不再需要把FormData的值提取出来组合成key1=value1&key2=value2...的形式。可直接发送。
const oData = new FormData(form);
r.send(oData);

例子

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. 进度条 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的表单请求

以上是关于[JavaScript]_[初级]_[不使用JQuery原生Ajax提交表单文件并监听进度]的主要内容,如果未能解决你的问题,请参考以下文章

[JavaScript]_[初级]_[不使用JQuery原生Ajax提交表单]

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

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

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

[JavaScript]_[初级]_[关于forin或for...in循环语句的用法]

[JavaScript]_[初级]_[关于forin或for...in循环语句的用法]