在前端工作中,我們經常需要使用jQuery Ajax來進行數據的傳遞,而有時候我們也需要傳送文件。那么如何使用jQuery Ajax傳送文件呢?
jQuery提供了一個比如Ajax直接上傳文件的方法,它是通過FormData和XMLHttpRequest的組合來實現的。在這樣的一個組合中,FormData用于構建一個請求體,而XMLHttpRequest對象用于發送這個請求。我們只需簡潔的代碼,就可以實現執行這兩個操作。
var formData = new FormData(); formData.append('file', $('#file')[0].files[0]); $.ajax({ url: 'upload.php', type: 'POST', data: formData, processData: false, contentType: false, success: function(response){ console.log(response); }, error: function(xhr, status, error){ console.log(xhr.responseText); } });
上述代碼首先創建了一個FormData對象,將要上傳的文件添加進去。然后通過$.ajax()方法將數據上傳至upload.php文件,我們可以在這個文件中使用$_FILES數組來獲取上傳的文件信息。processData選項設為false,是為了讓jQuery不要對傳進來的FormData對象做任何處理。contentType選項也設為false,這樣jQuery就會在xhr.send()方法中設置合適的Content-Type頭部。
不難看出,靠著Ajax直接傳文件現在逐漸被廣泛應用。jQuery對于開發人員來說很有幫助,它的API讓開發變得更加容易、快捷,并且可以有效地提高效率。