Loading...

讓圖片上傳前先產生預覽

Temperature: 0 °C

ChungChung
author_tools

專案需要,上傳圖片至網站時先產生預覽圖~

參考了stackoverflow.com裡討論的的方式Url link

但因為需要同時上傳多個圖,因此改了一下用法,順便紀錄下來~
CSS部份

body { background: #efefef; color: #a3aa8c; } img { max-height: 100px; max-width: 100px; margin: 0 5px; }

Script部份
function readURL(input,kk) {
            if (input.files && input.files[0]) {
                var reader = new FileReader();
 
                reader.onload = function (e) {
                    $('#blah'+kk).attr('src', e.target.result);
                }
 
                reader.readAsDataURL(input.files[0]);
            }
        }

Html部份
<form action="#" method="post" name="Reportform" id="Reportform" enctype="multipart/form-data">
<div><input type="file" name="f[]" onchange="readURL(this,1);" /> <img id="blah1" src="#" alt="show image" /></div>
<div><input type="file" name="f[]" onchange="readURL(this,2);" /> <img id="blah2" src="#" alt="show image" /></div>
<div><input type="file" name="f[]" onchange="readURL(this,3);" /> <img id="blah3" src="#" alt="show image" /></div>
</form>

另外也可使用
URL.createObjectURL() 

的方式

讓圖片上傳前先產生預覽

屏東縣內埔鄉東寧村勝利路 Go

https://innstory.com/story-讓圖片上傳前先產生預覽-707
寫程式筆記

Prev
 檳城美食系列紅豆霜

Next
雞蛋花 

Nearby Attractions

屏東縣內埔鄉東寧村勝利路-Nearby Attractions

  • 六堆天后宮 Go
  • 新北勢庄東柵門 Go
  • 「清朝下淡水營」遺構 Go
  • 涼山遊憩區 Go
  • 六堆客家文化園區 Go
  • 豐田老街 Go

About the Author

Chung

我是chung
網路工作者
主業是網站系統開發建置
副業是做夢,寫故事
作品請參考/teme.biz
做夢請參考/innstory.com
聯絡/chung.teme@gmail.com

#有人用筆寫日記,有人用歲月寫日記,有人用照片寫日記,而我,用innstory寫日記。

Visitor message

Leave some footprints to prove that you visited me

Recommended reading

Author's other related stories

將照片加入簽名檔

將照片加入簽名檔

我始終相信,科技來自於人性... 而我的人性則是來自於墮性.... 開發 innstory.com ...

分享到各社群的方式

分享到各社群的方式

每次在寫網站系統時..客戶總會要求希望他們的網站可以有分享到社群網站的功能... 所以把一些常用的方...

使FCKeditor所上傳的圖檔檔名亂數化

使FCKeditor所上傳的...

編輯"../fckor/or/filemanager/connectors/php/com...

Recommended reading

Other stories happened at this address

紅蘿蔔山藥木耳牛肉湯~

紅蘿蔔山藥木耳牛肉湯~

月子餐若吃太燥熱,難免就會影響到腸胃..... Mandy說她腸胃好像有點不順~........ 這...

就攪工的鹹魚肉餅

就攪工的鹹魚肉餅

就攪工的鹹魚肉餅

2019年農曆新年提前開始

2019年農曆新年提前開始

開著大白,載上Mandy跟G,在點分離開內湖。 點分上了高速公路,這是我第一次從台北上高速公路開車回...

嘗試用CSS畫圖

嘗試用CSS畫圖

一直想為innstory設計的房子圖案,為了讓瀏覽速加快,最後還是決定用CSS 完成 a 用CSS畫...

小孩很忙~

小孩很忙~

a a a a a a a 小孩很忙~ 照顧小小孩雖然辛苦, 但等到他回台北後, 不免,還是會失落的...

偶發性插畫

偶發性插畫

s 偶發性插畫~

Please select an option

error

Hi, thank you for your participation, but you cannot vote repeatedly~

Join innstory now and start recording your story.

"Innstory" is a place to store stories. We are committed to becoming a warm platform. Deepening the bonds between people is our direction.
We are convinced that the blockchain between people is not just a cold calculation. Join us now.

Wrong format