首頁 > 網際網路

jq ajax如何傳送圖片到PHP

2019-12-13 22:07:44

jquery使用ajax傳送圖片到php伺服器端,主要是通過表單來提交圖片,在php端使用move_uploaded_file()上傳方法將圖片儲存在資料夾內。下面介紹實現的過程。

1

新建一個html檔案,命名為index.html,用於介紹使用ajax方法上傳圖片至php端。

註:使用jquery的ajax方法,必須載入jquery.min.js檔案。


2

在test.html頁面,建立一個id為upfile的form表單,在form表單內,建立一個上傳圖片的按鈕和一個上傳按鈕。


3

給form表單的上傳按鈕系結onclick點選事件,當按鈕被點選時,執行upload()函數來上傳圖片。


4

在upload()函數內,通過id獲得form表單物件,並使用new FormData獲得表單的資料作為ajax上傳圖片的引數。


5

使用ajax方法上傳圖片至php端,接收圖片資料的是upload.php檔案,同時設定傳送的圖片資料為上一步獲得的form資料,在圖片成功上傳後,使用alert()方法顯示上傳圖片後的結果。


6

在php端新建upload.php檔案,定義上傳圖片儲存的路徑為picture資料夾,通過$_FILES獲得圖片的資訊,並給上傳的圖片重新命名(日期+亂數+字尾)。


7

使用move_uploaded_file()方法上傳圖片至picture資料夾,最後返回圖片上傳成功的提示資訊,並把圖片的路徑一起返回前端頁面。


8

在瀏覽器執行index.html檔案,選擇上傳的圖片,點選「上傳」按鈕,彈出上傳成功的提示資訊,檢視picture檔案成功上傳的檔案。





IT145.com E-mail:sddin#qq.com