- Chung
- 0°C
- 9 年又 363 天
讓圖片上傳前先產生預覽
專案需要，上傳圖片至網站時先產生預覽圖~參考了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
