記憶加載中,請稍待...
JuilinChung
鎖住記憶
選擇大頭貼照
重新調整位置

讓圖片上傳前先產生預覽

收藏小紙條

無法截取內容!!但仍舊可以收藏小紙條

2016-05-31 JuilinChung 273 0
專案需要,上傳圖片至網站時先產生預覽圖~

參考了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
  • 這個地址也發生了其他 43 篇故事
    曾經在光華戲院後面的家 By JuilinChung 沒看見冰雹 但雨過天晴 By 鍾秉均 能夠一家人團聚在一起, 是最幸福的時光~ By 鍾秉均 我的抽屜裡永遠都翻得出舊記憶 By JuilinChung 嘗試用CSS畫圖 By JuilinChung 就攪工的鹹魚肉餅 By 鍾秉均 學人精 By JuilinChung 藝術無所不在 By JuilinChung 生日快樂~ By 鍾秉均 生日快樂 By JuilinChung 很久沒回家晚餐了爸爸今天親自下廚直說人多 ... By 鍾秉均 我的人生手稿-蕭老爹的故事 By JuilinChung 媽媽隨便煮煮都好吃~ By 鍾秉均 單純而美好~ By JuilinChung 喜歡大家聚在一起的感覺,連吃個飯都變得很 ... By 鍾秉均 小孩很忙~ By 鍾秉均 5U再次回去南部過暑假 By JuilinChung 愛吃玉米的5U By JuilinChung 我的父親 By JuilinChung 偶發性插畫 By JuilinChung 紅藜番茄南瓜鹹粥 By 鍾秉均 大年初一,一桌家鄉味。 By JuilinChung 2017年除夕 By JuilinChung 新髮色新氣象 By 鍾秉均 在妳眼裡 By JuilinChung 讓人血壓飆高的晚餐~ By 鍾秉均 我ㄟ頭家娘~ By JuilinChung 12朝,新丁粄。 By JuilinChung 兒時記趣 By JuilinChung 風雨過後的屏東,天空依然美麗啊...不知 ... By JuilinChung 2016猴年大年初一 By JuilinChung 這表情真是好看~ By JuilinChung 有沒有這樣的軟Q啊? By JuilinChung 讓圖片上傳前先產生預覽 By JuilinChung 祭出傳說中的育兒神器 By JuilinChung 海帶牛肉湯~佐高粱 By JuilinChung 背影 By JuilinChung 牛蒡蓮子豬腳湯~佐高粱 By JuilinChung 眼睛轉啊轉~在想些什麼呢? By JuilinChung 紅蘿蔔山藥木耳牛肉湯~ By JuilinChung Mandy,母親節快樂~ By JuilinChung 進補~ By JuilinChung 這尿尿小童搞的我好亂啊... By JuilinChung

其他您可能會有興趣的故事

雞蛋花
檳城美食系列紅豆霜

須同意使用 Email 才可進入此頁面

須同意使用 姓名 才可進入此頁面

須同意使用 性別 才可進入此頁面

須同意應用程式才能使用Facebook帳號進入此頁面

請重新登入!

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

Hi,請選擇一個你認為的答案

錯誤的URL...

執行錯誤...

別忘了填寫欄位...

輸入格式錯誤...

Email已經有人使用...

請填寫Email...

請填寫正確的Email...

密碼裡需包含英文字及數字8至12...

確認密碼是否與密碼相同...

很抱歉 您並沒有權限!請確認您的帳號密碼 或請連絡我們

正在更新排序...

帳號已經存在!請確認您的帳號密碼 或請連絡我們...