JSLite.io 使用FormData ajax上傳文件

時間 2020-01-06

標籤 jslite.io jslite 使用 formdata ajax 上傳文件欄目 Ajax 简体版

原文原文鏈接

XMLHttpRequest Level 2添加了一個新的接口FormData。利用FormData對象，咱們能夠經過js用一些鍵值對來模擬一系列表單控件，咱們還可使用XMLHttpRequest的send()方法來異步的提交這個"表單"。比起普通的ajax，使用FormData的最大優勢就是咱們能夠異步上傳一個二進制文件(圖片、壓縮文件等)。html

上傳文件例子

原生寫法

html<form id="form1" enctype="multipart/form-data" method="post" action="/session/sendImg?subID=3&subsID=2&ssID=163">
    <input type="file" name="file" id="file"/>
    <input type="text" name="name" id="name"/>
    <input type="button" onclick="sendForm()" value="Upload" />
</form>

jsfunction sendForm(){
    var fr = document.getElementById("form1")
    var fd = new FormData(fr);//使用HTML表單來初始化一個FormData對象
    fd.append("file", document.getElementById('file').files[0]);

    var xhr = new window.XMLHttpRequest();
    xhr.upload.addEventListener("progress", uploadProgress, false);
    xhr.addEventListener("load", uploadComplete, false);
    xhr.addEventListener("error", uploadFailed, false);
    xhr.addEventListener("abort", uploadCanceled, false);
    console.log(fd)
    xhr.open("POST", "/session/sendImg?subID=3&subsID=2&ssID=163");
    xhr.send(fd);
}
//+ uploadComplete  上傳結束函數  
//+ uploadFailed    上傳錯誤函數  
//+ uploadCanceled  終止函數

JSLite 方法

使用JSLite來發送FormData，但必需要正確的設置相關選項(jQuery是同樣的玩兒)ajax

jsfunction sendForm(){
    var fd = new FormData();
    fd.append("file",$('#file')[0].files[0]);
    fd.append("name",$('#name').val());
    $.ajax({
        type:'POST',
        dataType:'text',
        processData: false,  // 告訴JSLite不要去處理髮送的數據
        contentType: false,   // 告訴JSLite不要去設置Content-Type請求頭
        data:fd,
        url:'/session/sendImg?subID=3&subsID=2&ssID=163',
        success:function(data){
           console.log('success:',data)
        },
        error:function(d){
           console.log('error:',d)
        }
    })
}