原生ajax怎么传data,使用原生ajax通过formdata完成文件上传,并实时监控上传进度

原生ajax2.0使用FormData上传文件, 并监听上传进度

原生ajax2.0使用FormData上传文件, 并监听上传进度

上传

上传进度0%

// 处理上传进度

function progressFunction(e){

var progress_bar = document.getElementById("progress_bar");

var loading_dom = document.getElementById("loading");

var loading = Math.round(e.loaded / e.total * 100);

console.log("loading::", loading);

if(loading === 100){

loading_dom.innerHTML = "上传成功^_^";

}else{

loading_dom.innerHTML = "上传进度"+loading+"%"

}

progress_bar.style.width = String(loading * 3) + "px";

}

// 上传成功

function uploadComplete(e) {

console.log("上传成功！", e);

}

// 上传失败

function uploadFailed(e) {

console.log("上传失败", e);

}

function to_upload_file(){

var file_obj = document.getElementById("avatar").files[0]

if(file_obj){

var url = "/upload_file";

var form = new FormData();

form.append("file", file_obj);

var xhr = new XMLHttpRequest();

xhr.onload = uploadComplete; // 添加 上传成功后的回调函数

xhr.onerror = uploadFailed; // 添加 上传失败后的回调函数

xhr.upload.onprogress = progressFunction; // 添加 监听函数

xhr.open("POST", url, true);

xhr.send(form);

}else{

alert("请先选择文件后再上传")

}

}