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>
  • 相关阅读:
    JS优先队列排序。出队时,先找出优先级最高的元素,再按照先进先出出队。
    使用队列对数组排列,基数排序
    一个用JS数组实现的队列
    使用栈判断给定字符串是否是回文的算法
    使用js栈stack类的实现
    Bootstrap篇:弹出框和提示框效果以及代码展示
    一个漂亮的php验证码类
    jquery单选框radio绑定click事件实现和是否选中的方法
    phpQuery—基于jQuery的PHP实现
    PHP的函数-----生成随机数、日期时间函数
  • 原文地址:https://www.cnblogs.com/telwanggs/p/5306183.html
Copyright © 2011-2022 走看看