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

動態時報?

動態時報?

dsc 抓meta value的功能雖然還不是很完整... 但一些網站的meta...

apache下設置不顯示目錄列表 Indexes FollowSymLinks

apache下設置不顯示目錄列表 Indexes FollowSymLinks

pexelsphoto 選擇編輯httpd.conf文件 vi conf/httpd....

colorbox 使用 onclick href 驅動

colorbox 使用 onclick href 驅動

colorbox 一直都是很優秀的Lightbox外掛... 目前的網站中幾乎或多或少...

Recommended reading

Other stories happened at this address

哭聲、哭聲、哭聲,聲聲入耳

哭聲、哭聲、哭聲,聲聲入耳

新手爸比的第天.... 我天真的以為,在照顧小小鍾的同時.....我可以抽出時間來處理...

進補~

進補~

Mandy坐月子邁入第個星期,終於可以吃點滋補的漢方藥湯~ 所以今天的月子餐就由我來操...

大年初一,一桌家鄉味。

大年初一,一桌家鄉味。

大年初一,一桌家鄉味。...

喜歡大家聚在一起的感覺,連吃個飯都變得很有味道~

喜歡大家聚在一起的感覺,連吃個飯都變得很有味道~

喜歡大家聚在一起的感覺,連吃個飯都變得很有味道~...

我的抽屜裡永遠都翻得出舊記憶

我的抽屜裡永遠都翻得出舊記憶

Modern Talking 是一支德國流行音樂雙人組合。 陪伴過我青澀的歲月。 直到...

風雨過後的屏東,天空依然美麗啊...不知道今晚月亮賞不賞臉~

風雨過後的屏東,天空依然美麗啊...不知道今晚月亮賞不賞臉~

風雨過後的屏東,天空依然美麗啊...不知道今晚月亮賞不賞臉~...

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