JavaScript約 1 分鐘閱讀
使用jQuery PHP AJAX來實現圖片上傳 Image Upload
標籤#ajax#javascript#php
PHP AJAX Image Upload
通過AJAX功能上傳圖片非常容易，並且易於在頁面中實現，在這個例子中，使用AJAX進行PHP圖片上傳，無需重新加載頁面。
使用jQuery AJAX來實現圖片上傳。有一個帶有文件輸入欄，和一個提交按鈕的表單。在這段代碼中，使用所選圖像文件提交表單時，AJAX腳本將被執行，向PHP發送上傳請求。PHP代碼將上傳的圖像移動到目標文件夾，並返回圖像HTML，將AJAX響應預覽顯示HTML頁面。
HTML圖像上傳表單
以下代碼顯示圖像上載表單的HTML。在提交此表單時，將調用AJAX函數將請求發送到PHP圖像上傳代碼。
Upload Image File:
通過AJAX方法上傳PHP圖像
此代碼顯示用於通過發布FormData實例發送文件上傳請求的**ajax()**函數。在PHP中，它將文件上傳到指定的路徑。成功上傳圖片後，它會將上傳的圖片為AJAX作為回應，然後這將被添加到目標DIV以顯示使用者的預覽。
$(document).ready(function (e){
$("#uploadForm").on('submit',(function(e){
e.preventDefault();
$.ajax({
url: "upload.php",
type: "POST",
data: new FormData(this),
contentType: false,
cache: false,
processData:false,
success: function(data){
$("#targetLayer").html(data);
},
error: function(){
}
});
}));
});
PHP AJAX接收響應圖片檔案
Demo
通過AJAX上傳圖片後，我們會在目標div中顯示上傳圖片的預覽，如下所示。