innstory

讓圖片上傳前先產生預覽

Temperature: 0 °C

2016-05-31 Chung

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

參考了stackoverflow.com裡討論的的方式Url link

但因為我需要同時上傳多個圖，因此改了一下用法，順便紀錄下來~
CSS部份

body { background: #efefef; color: #a3aa8c; } img { max-height: 100px; max-width: 100px; margin: 0 5px; }

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]);

            }

        }

＜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