js post 方法提交文件
使用 javascript 异步提交表单,实现无刷新的 post 上传表单,主要使用的是浏览器基础对象 (chrome,edge/ie11,firefox)
FormData
FromData 是一次 http mulitpartfrom-data 的请求内容
可以使用 append 方法向其添加名词对
然后使用 XMLHttpRequest 的 send() 方法发送
eg:
var fileObj = new FromData();
fileObj.append('key',value); // value 可以是一个字符串 string 也可以是一个 blob (代表,file对象)
var xhr = new XMLHttpRequest();
xhr.open('POST','url',true);
xhr.send(fileObj);
// fileObj 传递的是 files[0] 对象,eg:fildObj = document.getElementById('file_pic').files[0]
var FILES = function(fileObj,url,callback,data){ if(!fileObj){ alert('请选择发布文件'); return; }; var FileController = url; // 接收上传文件的后台地址 // FormData 对象 var form = new FormData(); // 可以增加表单数据 // 存入文件对象 form.append("file",fileObj); // 其他描述参数解析 if(data!=''){ for(var key in data){ form.append(key,data[key]); }; }; // XMLHttpRequest 对象 var xhr = new XMLHttpRequest(); xhr.open("POST", FileController, true); xhr.onload = function () { if(xhr.readyState == 4 && xhr.status == 200){ // 查看后台反馈 if(callback){ var req = xhr.responseText; callback(req); }; } else if(xhr.readyState == 4 && xhr.status == 404){ callback({allow:'error'}); return; }; }; xhr.upload.onprogress = function(evt){ //侦查附件上传情况 //通过事件对象侦查 //该匿名函数表达式大概0.05-0.1秒执行一次 //console.log(evt); //console.log(evt.loaded); //已经上传大小情况 //evt.total; 附件总大小 var loaded = evt.loaded; var tot = evt.total; var per = Math.floor(100*loaded/tot); var son = document.getElementById('son'); son.innerHTML = per+"%"; //son.style.width=per+"%"; } xhr.send(form); }