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

PHP 如何檢測陣列是否有重複值

PHP 如何檢測陣列是否有重...

pexelsphoto55 PHP陣列,是在coding時常用到的儲存資料的方式。 但,若陣列中的資...

校外教學(木柵動物園)

校外教學(木柵動物園)

期中考週的校外教學,來到了上回去不成的木柵動物園。 炎熱的天,帶著位小蘿蔔頭,一邊觀察一邊完成老師交...

戶外教學到板橋派出所,當一日小警察。

戶外教學到板橋派出所,當一日...

差婆來了。

Recommended reading

Other stories happened at this address

這尿尿小童搞的我好亂啊...

這尿尿小童搞的我好亂啊......

s 這晚,兒子噴尿給我了....@@...就在我幫小傢伙換尿布的同時~ 看我一身狼狽樣....看他一...

生日快樂~

生日快樂~

媽媽下廚作羹湯 爸爸負責吹蠟燭 我們搞大了肚子 ( ˘ ³˘)♡生日快樂~

愛吃玉米的5U

愛吃玉米的5U

s 從拿到玉米開始,愛吃玉米的U就展現出他開心的笑容~ 看看這兄弟,就這樣豪邁地吃了起來。 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