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

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

html文件

問題一：如何實(shí)現(xiàn)上傳圖片的功能并把圖片顯示出來？

4個(gè)步驟：

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

創(chuàng)建FileReader對(duì)象，用正則表達(dá)式過濾圖片文件；

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

讀取文件，將url綁定到img標(biāo)簽的src屬性上。

詳細(xì)：

01.chooseImageFile方法

02.創(chuàng)建FileReader對(duì)象，用正則表達(dá)式過濾圖片

FileReader對(duì)象允許Web應(yīng)用程序來異步讀取存儲(chǔ)在用戶計(jì)算機(jī)上的文件里面的內(nèi)容，使用File和Blob對(duì)象指定要讀取的文件或數(shù)據(jù)，其中結(jié)合input:file可以很方便的讀取本地文件里面的內(nèi)容。

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

?

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

04.讀取文件

問題二：如何進(jìn)行提交表單數(shù)據(jù)？

給保存按鈕一個(gè)點(diǎn)擊事件，進(jìn)行提交數(shù)據(jù)，再給form標(biāo)簽一個(gè)action行為進(jìn)行提交表單數(shù)據(jù)。

問題三：如何清空?qǐng)D片？

問題四：如何把圖片保存到數(shù)據(jù)庫

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

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。