基于jquery实现图片的预览

关注

原创 2022-02-22 10:41:42 1.2k 阅读 AI 写同款· GEO 优化 ›

jquery实现图片预览（纯jquery实现）【代码】jquery实现图片预览（纯jquery实现）阅读详情


思路: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); //重新设置图片地址属性值
        }
    });
  });
});

收录于