当前位置： 移动技术网 > IT编程>开发语言>JavaScript > JS实现上传图片实时预览功能

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

2018年04月29日  | 移动技术网IT编程  | 我要评论

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

//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实现上传图片实时预览功能，希望对大家有所帮助

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网