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

作者簡介

Chung

我是chung
網路工作者
主業是網站系統開發建置
副業是做夢,寫故事
作品請參考/teme.biz
做夢請參考/innstory.com
聯絡/chung.teme@gmail.com

訪客留言

留下一些足跡證明你來拜訪過我

推薦閱讀

作者其他相關類別故事

PHP取得檔案路徑及檔案名稱

PHP取得檔案路徑及檔案名稱

例如我有一支檔案是放在根目錄下的demo資料夾中,檔案名稱為test.php 、首先取...

PDO連接Mysql方式 MVC上應用

PDO連接Mysql方式 MVC上應用

pexelsphoto 將連結資料庫的方式加入model function...

Html編輯器Ckeditor 4.0內容讀取與寫入方式

Html編輯器Ckeditor 4.0內容讀取與寫入方式

ckor 在Html編輯器裡,Ckor功能很強大雖然好用....但還是有很多部份需要微...

請選擇選項

執行錯誤

Hi,謝謝你的參與,但無法重複投票哦~

現在就加入innstory,開始紀錄你的故事。

「innstory」是一個儲存故事的地方,我們致力於成為一個有溫度的平台,加深人與人之間的羈絆是我們所努力的方向。
我們深信人與人間的區塊鏈不是只是冷冰冰的運算。現在就加入我們。