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部份 $(function(){...

分享 (励志短片) 王德顺 《最炫东北人》 完整版 Wang Deshun - Coolest Northeasterner (Inspirational Short Film)

分享 (励志短片) 王德顺 ...

我們都還年輕啊~ 還是可以一直做夢下去的。 只要有夢,我將可以走的更遠。 我是chung 主業做夢,...

colorbox 使用 onclick href 驅動

colorbox 使用 on...

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

Recommended reading

Other stories happened at this address

Mandy,母親節快樂~

Mandy,母親節快樂~

第一次當媽~ 完全不用採排,不需要練習.....一切都是那麼的理所當然~ 這小傢伙,我幫他換尿布換了...

這表情真是好看~

這表情真是好看~

我真的覺得小孩子的笑容是最能吸睛的~ 看著小傢伙這表情,我真的想對他說....其實你笑起來挺可愛的....

能夠一家人團聚在一起, 是最幸福的時光~

能夠一家人團聚在一起, 是最...

好好的端午連假, 卻下了三天三夜的雨, 哪裡也去不了~ 只能在家裡面吃吃吃~ 不過話說回來, 能夠一...

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

喜歡大家聚在一起的感覺,連吃...

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

新髮色新氣象

新髮色新氣象

第一次嚐試黑紅色以外的淺顏色, 光漂白就整整花了小時, 因為原有紅色卡色嚴重, 一直漂不乾淨, 重複...

稍稍紀錄一下中秋節的天

稍稍紀錄一下中秋節的天

好幾天沒紀錄故事了,原因是因為趕著客戶的專案。 今年下半年很熱鬧啊,看來似乎就要沒有喘口氣的機會了。...

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