jquery实现获取本地图片并展示

客官°小女子只卖身不卖艺 2023-06-19 02:30 14阅读 0赞

**一.html页面保留按钮和隐藏的img标签**

**二.jquery设置file改变函数**

$("#file").change(function(event){
    	var files = event.target.files, file;
    	if (files && files.length > 0) {
            // 获取目前上传的文件
    	    file = files[0];// 文件大小校验的动作
    	    if(file.size > 1024 * 1024 * 2) {
    		     alert('图片大小不能超过 2MB!');
    		     return false;
    	    }
    	    // 获取 window 的 URL 工具
    	    var URL = window.URL || window.webkitURL;
    	    // 通过 file 生成目标 url  获取真实的路径
    	    var imgURL = URL.createObjectURL(file);
    	    //用attr将img的src属性改成获得的url
    	    $("#img").attr("src",imgURL);
    	    $("#imgDiv").show();
    	    // 使用下面这句可以在内存中释放对此 url 的伺服，跑了之后那个 URL 就无效了
    	    // URL.revokeObjectURL(imgURL);
    	    }
    });

**三.测试**

![20191204102651612.png][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2NzA2ODc4_size_16_color_FFFFFF_t_70][]

[20191204102651612.png]: https://img-blog.csdnimg.cn/20191204102651612.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2NzA2ODc4_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/2019120410270972.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2NzA2ODc4,size_16,color_FFFFFF,t_70