js实现上传图片及时预览

本文实例为大家分享了javascript图片预览功能实现的具体代码,供大家参考,具体内容如下

先为大家分享一段关于js图片预览的代码,兼容火狐和谷歌浏览器

 /* 案例展示图片预览 */
$(function(){
  $("#file0").bind("change",function(){
 
    clickupLoad();
  });
});
function clickupLoad(){
 
  var imgObject = document.getElementById('file0');
  var getImageSrc = getFullPath(imgObject); // 本地路径
  var srcs = window.URL.createObjectURL(imgObject.files[0]);
  var pos = getImageSrc.lastIndexOf(".");
  var lastname = getImageSrc.substring(pos, getImageSrc.length) // 图片后缀]
   
  if(srcs!=""){
    $("#yulan2").attr("src",srcs);
  }else{
    alert("请选择一张图片");
  }
   
}
function getFullPath(obj) {  //得到图片的完整路径
  if (obj)
  {
    if (window.navigator.userAgent.indexOf("MSIE") >= 1){
      obj.select();
      return document.selection.createRange().text;
     
    }else if(window.navigator.userAgent.indexOf("Firefox") >= 1) {
      if (obj.files) {
        return window.URL.createObjectURL(obj.files[0]);
      }
      return obj.value;
    }
    return obj.value;
  }
}

实例代码实现js上传图片及时预览:


   
   
图片上传本地预览   

   
   

以上就是本文的全部内容,希望对大家学习javascript程序设计有所帮助。

你可能感兴趣的:(js实现上传图片及时预览)