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

Linux底下Apache啟動、停止、重啟指令

Linux底下Apache啟...

a5 如果apache安裝成為linux的服務的話,可以用以下命令操作: service httpd...

關掉phpinfo()

關掉phpinfo()

pexelsphotod 配置php環境的時候往往都會寫 phpinfo(); 這個函數來測試php...

圖型插件Elastislide

圖型插件Elastislid...

teach Elastislide是一款好用的圖形插件......

Recommended reading

Other stories happened at this address

12朝,新丁粄。

12朝,新丁粄。

看他喝完奶滿足的模樣.... 昨天,是小傢伙的朝(出生後第天或第天)。 父親說了,以前的習俗是要幫小...

高粱酒真的放越久越好喝嗎?

高粱酒真的放越久越好喝嗎?

這天,父親拿出一瓶建國年的金門高粱。 innimgcWcQRGOB 可惜我的嘴拙,品嘗不出長輩們所說...

就攪工的鹹魚肉餅

就攪工的鹹魚肉餅

就攪工的鹹魚肉餅

2016猴年大年初一

2016猴年大年初一

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

2015除夕夜

2015除夕夜

s 新年快樂!! 除夕夜的今天...我跟客戶買了他們家的羊肉爐(土羊哥)..嗯,順便打廣告一下。 評...

偶發性插畫

偶發性插畫

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