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);
    }