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>