1. 程式人生 > >圖片上傳頁面顯示

圖片上傳頁面顯示

<input type="file" onchange="previewFile()"><br>
<img src="" height="200" alt="Image preview...">

function previewFile() {
    var preview = document.querySelector('img');
    var file    = document.querySelector('input[type=file]').files[0];
    var reader  = new FileReader();
    var type=file.name.substr(file.name.lastIndexOf("."));
    if(type==".jpg"||type==".gif"||type==".JPG"||type==".GIF"||type==".png"){
        reader.onloadend = function () {
            preview.src = reader.result;
        }

        if (file) {
            reader.readAsDataURL(file);
        } else {
            preview.src = "";
        }
    }else{
        alert("請傳圖片!");
    }


}