JQuery實現input上傳圖片顯示縮略圖

<div>
    <input type="file" name="file" class="form-control" id="zx_img" style="padding: 0px;"
           placeholder="&nbsp;上傳文件">
    <div>
        <img id="img_preview" src=""style="width: 100px;">
    </div>
</div>

<script>
    //上傳圖片選擇文件改變后刷新預覽圖
    $("#zx_img").change(function (e) {
        var file = e.target.files || e.dataTransfer.files;  //獲取目標文件
        console.log(file[0])
        if (file) {   //如果目標文件存在
            var reader = new FileReader();   //定義一個文件閱讀器
            reader.onload = function () {   //文件裝載后將其顯示在圖片預覽里
                $("#img_preview").attr("src", this.result);
            };
            reader.readAsDataURL(file[0]);  //裝載文件
        }
    });
</script>