JavaScript的FormData+Ajax實現文件上傳+圖片上傳

 JavaScript的FormData+Ajax實現文件上傳+圖片上傳

在很多網頁開發中會存在文件上傳，圖片上傳的操作，有的使用form表單默認功能提交文件，有的採用Ajax提交

如果採用form表單的提交方式，恰恰又需要添加額外的參數或者需要設置特定的請求頭信息，那麼這種方式就顯得有些單調了

以下采用第二種方式：採用JavaScript+Ajax來實現文件上傳

如果希望在選擇文件確認的同時使文件上傳提交可以採用下面這種方式：

<input type="file" onchange="upload">

function upload(event) {
    // event.target.files 是一個數組
    // 如果需要上傳多個文件，此處可以採用for循環
    var file = event.target.files[0];
    
    // 實例化一個FormData對象，便於存儲文件對象
    var formData = new FormData();
    formData.append('file', file);
    
    // 調用ajax提交formData實例到服務端
    ajaxSubmit(formData);
}

function ajaxSubmit(data) {
    var xhr = '';
    if (window.XMLHttpRequest) {
        xhr = new XMLHttpRequest();
    } else {
        // 兼容IE瀏覽器
        xhr = new ActiveXObject('Microsoft.XMLHTTP')
    }
    /**
     * 參數1：傳輸類型,常用的有POST,GET
     * 參數2：請求地址，服務端接口
     * 參數3：是否採用異步
     */
    xhr.open('POST', 'http://xxx.com/upload', true);
    
    // 設置請求頭信息
    xhr.setRequestHeader('cookies','dfhjsdfhsjdksjdfhajk');
    
    // 請求過程監控
    xhr.onreadystatechange = function () {
        // 服務端響應狀態判斷
        if (xhr.readyState === 4) {
            // 服務端返回的狀態碼判斷
            if (xhr.status === 200) {
                // 服務端返回的數據
                consolo.log(xhr.responseText);
            }
        }
    }
    
    // 發送數據
    xhr.send(data);
}

如果希望在選擇文件後不上傳文件，由單獨提交按鈕一次性上傳，可以採用下面這種方式：

<input type="file" id="upFile">

<input type="button" value="文件上傳" onclick="upload">

 

function upload() {
    // document.getElementById('upFile').files 是一個數組
    // 如果需要上傳多個文件，此處可以採用for循環
    var file = document.getElementById('upFile').files[0];
    
    // 實例化一個FormData對象，便於存儲文件對象
    var formData = new FormData();
    formData.append('file', file);
    
    // 調用ajax提交formData實例到服務端
    ajaxSubmit(formData);
}

function ajaxSubmit(data) {
    var xhr = '';
    if (window.XMLHttpRequest) {
        xhr = new XMLHttpRequest();
    } else {
        // 兼容IE瀏覽器
        xhr = new ActiveXObject('Microsoft.XMLHTTP')
    }
    /**
     * 參數1：傳輸類型,常用的有POST,GET
     * 參數2：請求地址，服務端接口
     * 參數3：是否採用異步
     */
    xhr.open('POST', 'http://xxx.com/upload', true);
    
    // 設置請求頭信息
    xhr.setRequestHeader('cookies','dfhjsdfhsjdksjdfhajk');
    
    // 請求過程監控
    xhr.onreadystatechange = function () {
        // 服務端響應狀態判斷
        if (xhr.readyState === 4) {
            // 服務端返回的狀態碼判斷
            if (xhr.status === 200) {
                // 服務端返回的數據
                consolo.log(xhr.responseText);
            }
        }
    }
    
    // 發送數據
    xhr.send(data);
}