Loading...

讓圖片上傳前先產生預覽

Temperature: 0 °C

ChungChung
專案需要,上傳圖片至網站時先產生預覽圖~

參考了stackoverflow.com裡討論的的方式連結網址

但因為需要同時上傳多個圖,因此改了一下用法,順便紀錄下來~
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

圖型插件Elastislide

圖型插件Elastislide

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

如何使用javascript判斷身分證號跟居留證格式

如何使用javascript判斷身分證號跟居留證格式

首先,我是把如何用javascript判斷字串中必須包含中英文的方式延伸~ 將每一個字...

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

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

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

Recommended reading

Other stories happened at this address

嘗試用CSS畫圖

嘗試用CSS畫圖

一直想為innstory設計的房子圖案,為了讓瀏覽速加快,最後還是決定用CSS 完成...

牛蒡蓮子豬腳湯~佐高粱

牛蒡蓮子豬腳湯~佐高粱

先說好,高粱是我在喝的。因為一口豬腳嘖一口高粱....真的是很棒的滋味~ 切記.......

藝術無所不在

藝術無所不在

當U了解到繪畫所帶來的樂趣~ 自當所到之處無一倖免。 最新作品,彩繪考卷,用色大膽有深...

進補~

進補~

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