基于jquery实现图片的预览

wll3241@163.com

已于 2022-02-22 10:41:42 修改

阅读量1k

点赞数

分类专栏： javascript 文章标签：图片预览图片上传

于 2017-09-24 16:34:32 首次发布

本文链接：https://blog.csdn.net/Afreshmemory/article/details/78077678

版权

javascript 专栏收录该内容

9 篇文章 0 订阅

订阅专栏


思路:1.点击input选择文件,获取文件的图片路径赋值给img标签src属性。[或者动态创建img标签]

// Html
<img id="preImg" src="" >
<input id="upBtn" name="file" accept="image/*" type="file" style="display: none"/>

// js
//获取文件的路径，该路径不是文件在本地的路径
function getObjectURL(file) {
   var url = null ;
   if (window.createObjectURL != undefined) {
       url = window.createObjectURL(file);  // basic
   } else if (window.URL != undefined) {
       url = window.URL.createObjectURL(file);  // mozilla(firefox)
   } else if (window.webkitURL != undefined) { 
       url = window.webkitURL.createObjectURL(file); // webkit or chrome
   }
   return url ;
}


$(function() {
    $("#preImg").click(function () {
        $("#upBtn").click(); // 上传按钮消失后,点击图片出发上传的点击事件                
        $("#upBtn").on("change",function(){
        var src = getObjectURL(this.files[0]) ;
        if (objUrl) {
           $("#preImg").attr("src", src); //重新设置图片地址属性值
        }
    });
  });
});