js本地图片预览,兼容ie[6-9]、火狐、Chrome17+、Opera11+、Maxthon3<tr> <td style="width:35%;" class="noBorderL

来源:互联网 发布:淘宝妈妈装模特莫姐 编辑:程序博客网 时间:2024/06/06 05:04

<tr>
<td style="width:35%;" class="noBorderL firstTD">资格证图片</td>
<td style="width:65%;" class="secondTDnd">
<div id="preDiv" style="display:none;vertical-align: middle;border: 1px solid #e5e5e5;width:50px;height:50px; " ></div>
<img id="preImg" src="${certificate.sys_certificate_img}" style="vertical-align: middle;border: 1px solid #e5e5e5;width:50px;height:50px; <#if (certificate.sys_certificate_img=='')>display:none</#if> " />
<input name="file" onchange="PreviewImage(this, 'preImg', 'preDiv')" type="file" class="inputSty required"/>
</td>
</tr>



//js本地图片预览,兼容ie[6-9]、火狐、Chrome17+、Opera11+、Maxthon3

     function PreviewImage(fileObj, imgPreviewId, divPreviewId) {
          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();
          var preImg = $($(fileObj).parent().find("img")[0]);


          if (allowExtention.indexOf(extention) > -1) {
              if (fileObj.files) {//HTML5实现预览,兼容chrome、火狐7+等
                  if (window.FileReader) {
                      var reader = new FileReader();
                      reader.onload = function (e) {
                          preImg.attr("src", e.target.result);
                      }
                      reader.readAsDataURL(fileObj.files[0]);
                      preImg.show();
                  } else if (browserVersion.indexOf("SAFARI") > -1) {
                      alert("不支持Safari6.0以下浏览器的图片预览!");
                  }
              } else if (browserVersion.indexOf("MSIE") > -1) {
                  if (browserVersion.indexOf("MSIE 6") > -1) {//ie6
                      preImg.attr("src", fileObj.value);
                       preImg.show();
                  } else {//ie[7-9]
                      fileObj.select();
                      if (browserVersion.indexOf("MSIE 9") > -1){
                          fileObj.blur(); //不加上document.selection.createRange().text在ie9会拒绝访问
                      }
                      var newPreview = document.getElementById(divPreviewId);
                      if (newPreview == null) {
                          newPreview = document.createElement("div");
                          newPreview.setAttribute("id", divPreviewId);
                          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 + "')";
                    $(newPreview).css("display","inline-block");
                    preImg.hide();
                  }
              } else if (browserVersion.indexOf("FIREFOX") > -1) {//firefox
                  var firefoxVersion = parseFloat(browserVersion.toLowerCase().match(/firefox\/([\d.]+)/)[1]);
                  if (firefoxVersion < 7) {//firefox7以下版本
                      preImg.attr("src", fileObj.files[0].getAsDataURL());
                  } else {//firefox7.0+                    
                     preImg.attr("src", window.URL.createObjectURL(fileObj.files[0]));
                  }
                   preImg.show();
              } else {
                   preImg.attr("src", fileObj.value);
                    preImg.show();
              }
          } else {
              layer.msg("仅支持" + allowExtention + "为后缀名的文件!");
              fileObj.value = ""; //清空选中文件
              if (browserVersion.indexOf("MSIE") > -1) {
                  fileObj.select();
                  document.selection.clear();
              }
              fileObj.outerHTML = fileObj.outerHTML;
          }
      }
1 0
原创粉丝点击