jQuery Ajax使得在前后端之間傳遞文件變得非常簡單。傳遞文件的過程并沒有太大的不同,只是需要使用formData對象作為傳輸數據的載體,而不是簡單的字符串或者json對象。
下面是一些示例代碼:
// 通過表單上傳文件 var formData = new FormData(); formData.append('file', $('input[type=file]')[0].files[0]); $.ajax({ url: '/upload', type: 'POST', data: formData, processData: false, contentType: false, success: function(response) { console.log(response); }, error: function(xhr, status, error) { console.log(error); } }); // 下載文件 $.ajax({ url: "/download", type: "GET", xhrFields: { responseType: "blob" }, success: function(response, status, xhr) { var filename = "myfile.txt"; var disposition = xhr.getResponseHeader('Content-Disposition'); if (disposition && disposition.indexOf('attachment') !== -1) { var filenameRegex = /filename[^;=\n]*=((['"]).*?\2|[^;\n]*)/; var matches = filenameRegex.exec(disposition); if (matches != null && matches[1]) filename = matches[1].replace(/['"]/g, ''); } var blob = new Blob([response], { type: 'application/octet-stream' }); var url = window.URL.createObjectURL(blob); var a = document.createElement('a'); a.href = url; a.download = filename; document.body.appendChild(a); a.click(); a.remove(); window.URL.revokeObjectURL(url); } });
在第一個例子中,我們首先構建了一個formData對象,并使用該對象作為傳輸載體。該form對象將包含一個'file'鍵和一個具有input[type=file]元素的值,表示要傳輸的文件。
在第二個例子中,我們使用了一個xhr對象進行文件下載。我們為該對象的responseType屬性指定為"blob",以確保我們能夠成功的下載二進制文件。當我們接收到響應時,我們從響應中獲取文件名和數據,組合成blob并創建一個下載鏈接。
上一篇外發光圓點css