摘要：方案一表單上傳該方案優(yōu)點(diǎn)是支持好，缺點(diǎn)刷新頁面。提交原理就是上傳文件的重點(diǎn)。當(dāng)使用有文件上傳控件的表單時(shí)，該值是必需的將空格轉(zhuǎn)換為符號(hào)，但不編碼特殊字符方案二表單上傳優(yōu)化方案一缺點(diǎn)該方案的優(yōu)點(diǎn)也是支持好，缺點(diǎn)是不支持跨域。

書寫是為了更好的記憶。

該方案優(yōu)點(diǎn)是支持好，缺點(diǎn)刷新頁面。

原理：enctype就是form上傳文件的重點(diǎn)。

該方案的優(yōu)點(diǎn)也是支持好，缺點(diǎn)是不支持跨域。

原理：通過target把響應(yīng)指向一個(gè)iframe頁面，之后拿到返回?cái)?shù)據(jù)。

該方案的缺點(diǎn)兼容問題-caniuse，兼容有兩個(gè)方向一是低版本ie不支持CORS跨域，一個(gè)就是input新加的Files。優(yōu)點(diǎn)就是異步，進(jìn)度條，判斷大小，處理，跨域。

var file = input.files[0];
var xhr = new XMLHttpRequest();
if (xhr.upload) {
    xhr.upload.addEventListener("progress", function(e) {
        console.log(file, e.loaded, e.total);
    }, false);
    // 文件上傳成功或是失敗
    xhr.onreadystatechange = function(e) {
        if (xhr.readyState == 4) {
            if (xhr.status == 200) {
                console.log("成功", xhr.responseText)
            } else {
                console.log("失敗")    
            }
        }
    }
    // 開始上傳
    xhr.open("POST", "url", true);
    xhr.send(file);
}

該方案基本同上，只不過使用了FormData，缺點(diǎn)就是formData的兼容

var formData = new FormData();
formData.append("file", input.files[0]);
xhr.send(formData);

1. SWFupload Flash上傳
2. jquery.form.js 其他插件上傳

使用drop事件，獲取e.dataTransfer

document.querySelector("body").addEventListener("drop", (e)=>{
    e.preventDefault();//不寫的話，就打開了
    console.log(e.dataTransfer.files[0])
});

使用paste事件，獲取e.clipboardData

document.querySelector("body").addEventListener("paste", (e)=>{
    e.preventDefault();//不寫的話，就打開了
    console.log(e.clipboardData.files[0])
});

場(chǎng)景發(fā)生在，一個(gè)和客戶端交互的情況下，客戶端選擇的圖片之后返給我了一個(gè)base64，讓我上傳這個(gè)，而且接口那邊還不改，就要文件。代碼寫的比較啰嗦，其實(shí)也用不了這么多東西，當(dāng)時(shí)也是第一次接觸atob、Blob、ArrayBuffer這些東西，就寫成這樣了。

  function(data){
    var _str = atob(data.base64Str)
    var _filePath = ((data.filePath.match(/.(jpg|jpeg|png|bmp)$/) || [])[1] || "png").toLowerCase();
    var _filePathHash = {
        jpg:"image/jpeg",jpeg:"image/jpeg",png: "image/png",bmp:"application/x-bmp",
    }
    var pre = "--------------------------1
Content-Disposition: form-data; name="file"; filename="1.png"
Content-Type: "+_filePathHash[_filePath]+"

";
    var end = "
--------------------------1--";
    var buffer = new ArrayBuffer(_str.length);
    var uint8 = new Uint8Array(buffer);
    for(var i in _str){
        uint8[i] = _str.charCodeAt(i);
    }
    var blob = new Blob([pre, uint8, end], {type: _filePathHash[_filePath]});
    var oReq = new XMLHttpRequest();
    oReq.open("POST", "url", true);
    oReq.setRequestHeader("Content-Type", "multipart/form-data; boundary=------------------------1")
    oReq.onreadystatechange=function(){if (oReq.readyState==4 && oReq.status==200){console.log(oReq.responseText); }
    oReq.send(blob);

上傳一般來說都是要寫樣式的，不能說光是默認(rèn)的input樣式就ok，但是呢，樣式又不是那么太好寫，我們?cè)趺崔k呢？

label標(biāo)簽的for去觸發(fā)input的單擊，這樣不就好了嗎？input的樣式不好寫，那我們把他藏起來，給label寫樣式。

input[type=file]左邊是一個(gè)input右邊是個(gè)按鈕，其實(shí)是按鈕的樣式不好改，那么我們外面包裹一層overlfow:hidden，然后給input設(shè)置成一個(gè)極大，讓他所有不一樣的東西，都超出去，這樣就是在能改動(dòng)的區(qū)域改動(dòng)了