ajax实例：实现文件下载和上传

下载文件

1.xhr

function createObjectURL(object) { return (window.URL) ? window.URL.createObjectURL(object) : window.webkitURL.createObjectURL(object); }

var xhr = new XMLHttpRequest();
var formData = new FormData();
xhr.open('get', `${HyStationAccountInfoBaseOnWebApiBaseUrl}/DeviceTerminalOtaFileManage/DownloadUpgradeFile/${rowSelected.upgradeFileId}`);  //url填写后台的接口地址，如果是post，在formData append参数（参考原文地址）
xhr.setRequestHeader("Authorization", window.sessionStorage.getItem("AuthorizationToken"));
xhr.responseType = 'blob';
xhr.onload = function (e) {
    if (this.status == 200) {
        var blob = this.response;
        var filename = 'xxx.png';  
        if (window.navigator.msSaveOrOpenBlob) {
            navigator.msSaveBlob(blob, filename);
        } else {
            var a = document.createElement('a');
            var url = createObjectURL(blob);
            a.href = url;
            a.download = filename;
            document.body.appendChild(a);
            a.click();
            window.URL.revokeObjectURL(url);
        }
    }
};
xhr.send(formData);
           

2.ajax

$.ajax({
    type: "Get",
    xhrFields: { responseType: 'blob' },
    url: `${url}`,
}).then(result => {
    var fileName = "fileName.jpg";
    if (typeof window.navigator.msSaveBlob !== 'undefined') {
        window.navigator.msSaveBlob(result, fileName)
    } else {
        let URL = window.URL || window.webkitURL
        let objectUrl = URL.createObjectURL(result)
        if (fileName) {
            var a = document.createElement('a')
            if (typeof a.download === 'undefined') {
                window.location = objectUrl
            } else {
                a.href = objectUrl
                a.download = fileName
                document.body.appendChild(a)
                a.click()
                a.remove()
            }
        } else {
            window.location = objectUrl
        }
    }
})
           

responseType:'blob'是关键！！

上传文件

<form id="form" method="post" enctype="multipart/form-data">
    <input id="upload-btn" name="file"/>
</form>
           

var form_data = new FormData($('#form')[0]);

$.ajax({
    type: "POST",
    url: `${url}`,
    data: form_data,
    processData: false,
    contentType: false,
    success: function (result) {
        //TODO
    }
});