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

RewriteRule仿靜態連結

RewriteRule仿靜態...

前幾天寫了關於頁面導向位置的定義。https://innst...

Photoshop 曲線文字建置

Photoshop 曲線文字...

Photoshop一直都是很強悍的繪圖軟體。 裡頭的【鋼筆工具】,可以拉貝茲曲線的.... 我剛開始...

Android Studio 2.3 隨機改變背景顏色

Android Studio...

class55 開始學習APP 其實我照著工具書上的方式總是在宣告變數時會產生問題~ 例如工具書上寫...

Recommended reading

Other stories happened at this address

愛吃玉米的5U

愛吃玉米的5U

s 從拿到玉米開始,愛吃玉米的U就展現出他開心的笑容~ 看看這兄弟,就這樣豪邁地吃了起來。 s 若是...

2017年除夕

2017年除夕

s 年的今天,U第一次的農曆新年~ 按照慣例,今天必須要到祠堂,跟祖先們報告去年的狀況。 然後請祖先...

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

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

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

有沒有這樣的軟Q啊?

有沒有這樣的軟Q啊?

是有沒有這樣的軟Q啊? 這是小傢伙目前最喜歡的睡眠姿勢。 只是...你側睡就側睡,是有沒有必要讓頭整...

2015除夕夜

2015除夕夜

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