在Web開發過程中,經常會涉及到通過AJAX請求返回文件或圖片的需求。這時候就需要使用jQuery的ajax方法來實現。
$.ajax({ url: "download.php", method: "POST", data: {'file': 'example.pdf'}, xhrFields: { responseType: 'blob' // 返回文件類型 }, success: function(data) { var fileName = "example.pdf"; // 下載文件的名稱 var a = document.createElement('a'); var url = window.URL.createObjectURL(data); a.href = url; a.download = fileName; a.click(); window.URL.revokeObjectURL(url); } });
在上面的代碼中,我們通過指定xhrFields來告訴jQuery,我們希望返回的是一個blob類型的文件。然后在請求成功后,我們通過使用createElement方法創建一個a標簽,并指定下載文件的名稱,最后模擬點擊該a標簽,即可實現下載文件的功能。
需要注意的是,使用ajax請求返回文件時,服務端需要將文件以二進制流的形式返回給客戶端,代碼示例中的download.php文件就是一個簡單的實現。
$file = $_REQUEST['file']; // 獲取請求的文件名 $filePath = './files/' . $file; // 文件所在的路徑 header('Content-Description: File Transfer'); header('Content-Type: application/octet-stream'); header('Content-Disposition: attachment; filename="' . basename($filePath) . '"'); header('Expires: 0'); header('Cache-Control: must-revalidate'); header('Pragma: public'); header('Content-Length: ' . filesize($filePath)); readfile($filePath); // 以二進制流的形式輸出文件 exit;
在download.php文件中,我們首先獲取請求的文件名,并指定文件所在的路徑。然后通過header()函數設置響應頭信息,告訴客戶端返回的是一個二進制文件,并指定文件名稱。最后通過readfile()函數輸出文件數據。
以上就是使用jQuery.ajax方法返回文件的簡單示例。希望能對大家有所幫助。
下一篇css 塊級元素轉換