使用jQuery PHP AJAX來實現圖片上傳 Image Upload

4 月 11, 2018 | Javascript, | 0 comments

PHP AJAX Image Upload

通過AJAX功能上傳圖片非常容易,並且易於在頁面中實現,在這個例子中,使用AJAX進行PHP圖片上傳,無需重新加載頁面。

AJAX進行PHP圖片上傳

使用jQuery AJAX來實現圖片上傳。有一個帶有文件輸入欄,和一個提交按鈕的表單。在這段代碼中,使用所選圖像文件提交表單時,AJAX腳本將被執行,向PHP發送上傳請求。PHP代碼將上傳的圖像移動到目標文件夾,並返回圖像HTML,將AJAX響應預覽顯示HTML頁面。

HTML圖像上傳表單

以下代碼顯示圖像上載表單的HTML。在提交此表單時,將調用AJAX函數將請求發送到PHP圖像上傳代碼。


通過AJAX方法上傳PHP圖像

此代碼顯示用於通過發布FormData實例發送文件上傳請求的ajax()函數。在PHP中,它將文件上傳到指定的路徑。成功上傳圖片後,它會將上傳的圖片為AJAX作為回應,然後這將被添加到目標DIV以顯示使用者的預覽。

PHP AJAX接收響應圖片檔案


            

Demo

通過AJAX上傳圖片後,我們會在目標div中顯示上傳圖片的預覽,如下所示。

觀看展示 | 下載原始碼

文章翻譯來源:https://phppot.com/php/php-ajax-image-upload/