[JavaScript]_[初级]_[不使用JQuery原生Ajax提交表单文件并监听进度]
Posted infoworld
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了[JavaScript]_[初级]_[不使用JQuery原生Ajax提交表单文件并监听进度]相关的知识,希望对你有一定的参考价值。
场景
- 不可否认,使用
JQuery
来提交表单文件还是比较方便的。问题是JQuery
性能问题,去掉JQuery
如何提交文件,并且监听文件的提交进度?
说明
-
提交表单文件
<form enctype="multipart/form-data"...
需要增加enctype="multipart/form-data"
的属性,不然无法提交成功。 -
使用原生
XMLHttpRequest
技术提交文件时, 是不需要设置Content-Type
[5]的。 -
对上传文件进行进度监听,是需要监听
XMLHttpRequest
的属性upload
的progress
[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+"%";
);
- 发送文件表单里的其他输入框数据,不再需要把
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);
参考
以上是关于[JavaScript]_[初级]_[不使用JQuery原生Ajax提交表单文件并监听进度]的主要内容,如果未能解决你的问题,请参考以下文章
[JavaScript]_[初级]_[不使用JQuery原生Ajax提交表单]
[JavaScript]_[初级]_[不使用JQuery原生Ajax提交表单文件并监听进度]
[JavaScript]_[初级]_[不使用JQuery原生Ajax提交表单文件并监听进度]
[JavaScript]_[初级]_[不使用JQuery原生Ajax提交表单文件并监听进度]