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