JS實現圖片上傳之前先預覽

yefx 9年前發布 | 7K 次閱讀 JavaScript 

 
<html xmlns="http://www.w3.org/1999/xhtml"&gt;
<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>


</pre>
 本文由用戶 yefx 自行上傳分享，僅供網友學習交流。所有權歸原作者，若您的權利被侵害，請聯系管理員。
 轉載本站原創文章，請注明出處，并保留原始鏈接、圖片水印。
 本站是一個以用戶分享為主的開源技術平臺，歡迎各類分享！