easyui文件框与html文件框实现本地图片预览

来源：互联网发布：软件测试的周期编辑：程序博客网时间：2024/05/29 07:46

1.easyui文件框实现本地图片预览

        <tr>    <td>新闻小图：</td>    <td><input class="easyui-filebox" id="picture" name="picture" data-options="prompt:'选择图片',onChange:change_photo,accept:'image/bmp,image/x-png,image/gif,image/jpeg,image/png'" style="width:260px"></td></tr>     <tr>       <td></td>       <td id="imgtd"><img id="img" style="height:120px;width:180px"/></td>     </tr>

javascript代码

       //实现图片预览function change_photo(){            PreviewImage($("input[name='picture']")[0], 'img', 'imgtd');        }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();      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){                  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{          alert("仅支持"+allowExtention+"为后缀名的文件!");          fileObj.value="";//清空选中文件          if(browserVersion.indexOf("MSIE")>-1){                                      fileObj.select();              document.selection.clear();          }                          fileObj.outerHTML=fileObj.outerHTML;      }  }

2.html文件框实现本地图片预览

 <tr>    <td>新闻小图：</td>    <td><input type="file" id="picture" name="picture" style="width:260px"></td> </tr>         <tr>       <td></td>       <td id="imgtd"><img id="img" style="height:120px;width:180px"/></td>     </tr>
javascript代码：
function imgPreview(fileDom){    //判断是否支持FileReader    if (window.FileReader) {        var reader = new FileReader();    } else {        alert("您的设备不支持图片预览功能，如需该功能请升级您的设备！");    }    //获取文件    var file = fileDom.files[0];    var imageType = /^image\//;    //是否是图片    if (!imageType.test(file.type)) {        alert("请选择图片！");        return;    }    //读取完成    reader.onload = function(e) {        //获取图片dom        var img = document.getElementById("img");        //图片路径设置为读取的图片        img.src = e.target.result;    };    reader.readAsDataURL(file);}

效果图：

阅读全文

1 0