欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

JS实现上传图片实时预览功能

程序员文章站 2024-02-09 21:15:34
前段时间在网络上找的代码,修改了一部分用在了项目里。原博客地址找不到了,如果原作者看到的话留言我,将于第一时间删除。 //js本地图片预览,兼容ie[6-9]、火...

前段时间在网络上找的代码,修改了一部分用在了项目里。原博客地址找不到了,如果原作者看到的话留言我,将于第一时间删除。

//js本地图片预览,兼容ie[6-9]、火狐、chrome17+、opera11+、maxthon3
  function previewimage(fileobj) {
    //创建dom元素
    var divpreviewid = 'divpreview_' + fileobj.name;
    var imgpreviewid = 'imgheadphoto_' + fileobj.name;
    var html='<div id="'+divpreviewid+'">'+
          '<img id="'+imgpreviewid+'" src="images/moren.jpg" style="width: 120px; height: 120px; border: solid 1px #d2e2e2;" />'+
         '</div>';
    $('#'+divpreviewid).remove();
    $(fileobj).after(html);
    //进行限制
    var allowextention = ".jpg,.bmp,.gif,.png"; //允许上传文件的后缀名document.getelementbyid("hfallowpicsuffix").value;
    var extention = fileobj.value.substring(fileobj.value.lastindexof(".") + 1).tolowercase();
    var browserversion = window.navigator.useragent.touppercase();
    if (allowextention.indexof(extention) > -1) {  //格式正确
      if (fileobj.files) {  //html5实现预览,兼容chrome、火狐7+等
        if (window.filereader) {
          var reader = new filereader();
          reader.onload = function (e) {
            document.getelementbyid(imgpreviewid).setattribute("src", e.target.result);
          }
          reader.readasdataurl(fileobj.files[0]);
        } else if (browserversion.indexof("safari") > -1) {
          $('#'+divpreviewid).remove();
          alert("不支持safari6.0以下浏览器的图片预览!");
        }
      } else if (browserversion.indexof("msie") > -1) {
        if (browserversion.indexof("msie 6") > -1) {//ie6
          document.getelementbyid(imgpreviewid).setattribute("src", fileobj.value);
        } else {//ie[7-9]
          fileobj.select();
          if (browserversion.indexof("msie 9") > -1)
            fileobj.blur(); //不加上document.selection.createrange().text在ie9会拒绝访问
          var newpreview = document.getelementbyid(divpreviewid + "new");
          if (newpreview == null) {
            newpreview = document.createelement("div");
            newpreview.setattribute("id", divpreviewid + "new");
            newpreview.style.width = document.getelementbyid(imgpreviewid).width + "px";
            newpreview.style.height = document.getelementbyid(imgpreviewid).height + "px";
            newpreview.style.border = "solid 1px #d2e2e2";
          }
          newpreview.style.filter = "progid:dximagetransform.microsoft.alphaimageloader(sizingmethod='scale',src='" + document.selection.createrange().text + "')";
          var tempdivpreview = document.getelementbyid(divpreviewid);
          tempdivpreview.parentnode.insertbefore(newpreview, tempdivpreview);
          tempdivpreview.style.display = "none";
        }
      } else if (browserversion.indexof("firefox") > -1) {//firefox
        var firefoxversion = parsefloat(browserversion.tolowercase().match(/firefox\/([\d.]+)/)[1]);
        if (firefoxversion < 7) {//firefox7以下版本
          document.getelementbyid(imgpreviewid).setattribute("src", fileobj.files[0].getasdataurl());
        } else {//firefox7.0+          
          document.getelementbyid(imgpreviewid).setattribute("src", window.url.createobjecturl(fileobj.files[0]));
        }
      } else {
        document.getelementbyid(imgpreviewid).setattribute("src", fileobj.value);
      }
    } else {
      $('#'+divpreviewid).remove();
      alert("仅支持" + allowextention + "为后缀名的文件!");
      fileobj.value = ""; //清空选中文件
      if (browserversion.indexof("msie") > -1) {
        fileobj.select();
        document.selection.clear();
      }
      fileobj.outerhtml = fileobj.outerhtml;
    }
    return fileobj.value;  //返回路径
  }

以上所述是小编给大家介绍的js实现上传图片实时预览功能,希望对大家有所帮助