JS实现图片上传之前先预览

2018-07-20 来源：open-open

 
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title></title>
    <script type="text/javascript" src="jquery-1.8.1.min.js" > </script>
    <script type="text/javascript">
// 获取本地上传的照片路径  
function getPath(obj) {  
          if (obj) {  
              //ie  
              if (window.navigator.userAgent.indexOf("MSIE") >= 1) {  
                  obj.select();  
                  // IE下取得图片的本地路径  
                  return document.selection.createRange().text;  
              }  
              //firefox  
              else if (window.navigator.userAgent.indexOf("Firefox") >= 1) {  
                  if (obj.files) {  
                      // Firefox下取得的是图片的数据  
                      return obj.files.item(0).getAsDataURL();  
                  }  
                  return obj.value;  
              }  
              return obj.value;  
          }  
      }  
//显示图片
  
function previewPhoto(){  
    var picsrc=getPath(document.all.fileid);  
    var picpreview=document.getElementById("preview");  
    if(!picsrc){   
     return
    }  
    if(window.navigator.userAgent.indexOf("MSIE") >= 1) {  
         if(picpreview) {  
          try{  
                 picpreview.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = picsrc;  
                }catch(ex){  
           alert("文件路径非法，请重新选择！") ;  
           return false;  
          }  
     }else{   
        picpreview.innerHTML="<img src='"+picsrc+"' />";  
     }  
   }  
}  
  
  
  
function preImg(fileid, imgid) {
    if (typeof FileReader == 'undefined') {
        var picsrc=getPath(document.all.fileid)
        $("#imgid").attr({ src: picsrc});
        previewPhoto();
    }
    else{
    var reader = new FileReader();
    var name=$("#fileid").val();
    var picpreview=document.getElementById("preview");  
    reader.onload = function(e) {
        var img = document.getElementById(imgid);
        //img.src = this.result;
        picpreview.innerHTML="<img src='"+this.result+"' style='width: 179px; height: 189px;' />";  
    }
    reader.readAsDataURL(document.getElementById(fileid).files[0]);
}
}
  
  </script>
 </head>
 <body>
 <div id="preview" style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale); width:180px;height:190px;border:solid 1px black;">  
  
<input type="file" id="fileid" name="photofile" onchange="preImg(this.id,'imgid');"/>
 </body>
</html>

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点！
本站所提供的图片等素材，版权归原作者所有，如需使用，请与原作者联系。

上一篇:PHP四大基本排序算法实例

下一篇:Mapreduce任务实现邮件监控

最新资讯

热门推荐