zoukankan      html  css  js  c++  java
  • JS实现图片上传之前先预览

    <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=' 179px; height: 189px;' />"
        }
        reader.readAsDataURL(document.getElementById(fileid).files[0]);
    }
    }
       
      </script>
     </head>
     <body>
     <div id="preview" style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale); 180px;height:190px;border:solid 1px black;"
       
    <input type="file" id="fileid" name="photofile" onchange="preImg(this.id,'imgid');"/>
     </body>
    </html>
  • 相关阅读:
    Xargs
    录制终端会话-script--查找find
    命令之乐-cat
    Linux_shell编程--比较与测试
    线程进程
    计算机网络基础
    python基础-列表相关
    初学Python
    numpy 基本的数组统计方法
    python 操作mysql 入门
  • 原文地址:https://www.cnblogs.com/telwanggs/p/5306183.html
Copyright © 2011-2022 走看看