利用JQuery实现 点击图片预览 模拟点击input上传图片预览

 MeLiu   2020-03-19 14:08   148 人阅读  0 条评论

在一般项目中都会遇到前台图片预览但是并不需要上传,正好在项目中写到了这里并记录下

首先我们要引用JQuery 

<script src=“https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js”></script>


然后我们需要写一个File类型的input以及一个预览图片的 img标签,并分别设置ID

<input type="text" name="" id='input_id'>
<img id="box" src=""   onclick="preview('input_id','box')">


然后我们在加入JS脚本用于运行点击上传提前预览图片

function preview(id,img){
    //模拟点击INPUT 
    $("#"+id).click();
        //将图片预览到指定区域
    $("#"+id).change(function () {
            //创建blob对象,浏览器将文件放入内存中,并生成标识
            var img_src = URL.createObjectURL($(this)[0].files[0]);
            //给img标检的src赋值
            document.getElementById(img).src=img_src;
            //URL.revokeObjectURL(img_src);// 手动 回收,
	});
}


本文地址:https://www.mobaishare.com/post/35.html
版权声明:本文为原创文章,版权归 MeLiu 所有,欢迎分享本文,转载请保留出处!

 发表评论


表情

还没有留言,还不快点抢沙发?