(給Web前端雪兒加星標，提升前端技能)

之前寫過圖片上傳的案例，但是時間一長就忘了，這次寫的這個程序用到了圖片的上傳，并且能夠圖文顯示，所以寫了這篇文章來記錄一下。由于人們的生活質量的提高及網絡的發達，所以在各大軟件中上傳個人的頭像及其他圖片已成為普遍的事情，差不多所有的軟件都實現了這個功能，那么他們究竟是怎么做到的呢？其實并不難，現在我就以一個完整的例子來講解一下。先來看一下效果圖及結構，再來看一下實現的功能的寫法。

html文件

問題一：如何實現上傳圖片的功能并把圖片顯示出來？

4個步驟：

先打開file文件表單選擇圖片；

創建FileReader對象，用正則表達式過濾圖片文件；

利用改變事件將圖片顯示出來；

讀取文件，將url綁定到img標簽的src屬性上。

詳細：

01.chooseImageFile方法

02.創建FileReader對象，用正則表達式過濾圖片

FileReader對象允許Web應用程序來異步讀取存儲在用戶計算機上的文件里面的內容，使用File和Blob對象指定要讀取的文件或數據，其中結合input:file可以很方便的讀取本地文件里面的內容。

03.利用改變事件將圖片顯示出來

?

readAsDataURL()方法是 FileReader 對象里面的方法，其作用為可以獲取 API 異步讀取的文件 數據，將圖片另存為數據 Url,還可以實現圖片上傳預覽的效果，讓用戶確認是否就是上傳這張 圖片，提升用戶體驗。

04.讀取文件

問題二：如何進行提交表單數據？

給保存按鈕一個點擊事件，進行提交數據，再給form標簽一個action行為進行提交表單數據。

問題三：如何清空圖片？

問題四：如何把圖片保存到數據庫

注：在保存數據到數據庫的時候我遇到一個問題，就是雖然圖片上傳到了現實出來了，但是無法保存到數據庫，主要是fileCommodityPicture傳過來的值，第一種是傳到控制器的名字不能與數據庫中存放圖片的字段對應；第二種是傳到控制器的值要與input中的name屬性中的名字一致；第三種就是在form標簽中寫明是用了post請求(method="post")，否則fileCommodityPicture的值無法傳到控制器。雖然看似簡單，但是還是要注意細節問題！

總結

以上是生活随笔為你收集整理的$_post 数据上传到那个位置_如何实现图片上传并保存到数据库？的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。