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

如何用javascript接收radio button被選取後的值

如何用javascript接...

剛剛竟然犯了最簡單的錯誤~ 而且還是在趕著時間的時候⊙⊙ 我竟然蠢到用接收input 的方式去接收 ...

用distinct在MySQL中查詢多條不重複記錄值

用distinct在MySQ...

select *, count(distinct name) from table group by...

使用dp.SyntaxHighlighter 程式碼色彩顯示工具,讓紀錄程式心得更有可看性

使用dp.SyntaxHig...

說好了要在innstory裡寫下故事紀錄... 所以是不是有方便紀錄的工具或方式,就變成我在開發in...

Recommended reading

Other stories happened at this address

很久沒回家晚餐了爸爸今天親自下廚直說人多吃飯熱鬧

很久沒回家晚餐了爸爸今天親自...

很久沒回家晚餐了爸爸今天親自下廚直說人多吃飯熱鬧

紅蘿蔔山藥木耳牛肉湯~

紅蘿蔔山藥木耳牛肉湯~

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

讓人血壓飆高的晚餐~

讓人血壓飆高的晚餐~

讓人血壓飆高的晚餐~

2019年農曆新年提前開始

2019年農曆新年提前開始

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

沒看見冰雹
但雨過天晴

沒看見冰雹 但雨過天晴

沒看見冰雹 但雨過天晴

2016猴年大年初一

2016猴年大年初一

大年初一,闔家平安.... 過年,就是要大夥聚在一起吃吃喝喝,聊聊去年...想想今年.... 這慣例...

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