• JS。图片上传预览,兼容FF


    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
      <head>
        <title>imagePreview.html</title>
        
        <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
        <meta http-equiv="description" content="this is my page">
        <meta http-equiv="content-type" content="text/html; charset=UTF-8">
        
        <!--<link rel="stylesheet" type="text/css" href="http://ayue05.blog.163.com/blog/./styles.css">-->
        <script type="text/javascript" src="http://ayue05.blog.163.com/blog/jquery-1.7.2.min.js"></script>
        <script type="text/javascript" src="http://ayue05.blog.163.com/blog/imagePreview.js"></script>
        
        <script type="text/javascript">
        function preview(file,preview,imghead){
            if($.browser.msie){
                        //参数 是否是IE,div的id,img的id,高,宽
                previewImage(true,file,preview,imghead,300,400);
        }else{
                        //参数 是否是IE,div的id,img的id,高,宽
                previewImage(false,file,preview,imghead,300,400);
            }
            
        }
        </script>
      </head>
     
      <body>
      <table>
      <tr>
      <td>添加圖片:</td>
              <td><input type="file" id="file" name="tip.uploadImage" value="文档上传" οnchange="preview(this,'preview','imghead')"/>
              <div>請上傳 202 pixel X 111 pixel 大小的圖片 </div>
              <div id="imagePreview" >图片预览
              <div id="preview">
            <img id="imghead" width=202 height=111 border=0  />
            </div>
              </div>
              </tr>
          </table>
      </body>
    </html>

    IMGJS
    function clacImgZoomParam( maxWidth, maxHeight, width, height ){
            var param = {top:0, left:0, width, height:height};
            if( width>maxWidth || height>maxHeight )
            {
                rateWidth = width / maxWidth;
                rateHeight = height / maxHeight;
               
                if( rateWidth > rateHeight )
                {
                    param.width =  maxWidth;
                    param.height = Math.round(height / rateWidth);
                }else
                {
                    param.width = Math.round(width / rateHeight);
                    param.height = maxHeight;
                }
            }
           
            param.left = Math.round((maxWidth - param.width) / 2);
            param.top = Math.round((maxHeight - param.height) / 2);
            return param;
        }
       
       
        function previewImage(isIE,file,preview,imghead,width,height)
        {
          var MAXWIDTH  = width;
          var MAXHEIGHT = height;
          var div = document.getElementById(preview);
         
          if(isIE){
           //IE预览使用滤镜??
                        // var docObj=document.getElementById(file);
                          var imgObjPreview=document.getElementById(imghead);
                            file.select();
                          // docObj.blur();
                            var imgSrc = document.selection.createRange().text;
                            var localImagId = document.getElementById(preview);
                            //必须设置高宽?
                            localImagId.style.width = width+"px";
                            localImagId.style.height = height+"px";
    //                        //????????????????????????é???????¨??·??????????????????é? ??????
                            localImagId.style.filter="progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)";
                            localImagId.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = imgSrc;
                            imgObjPreview.style.display = 'none';
                            document.selection.empty();
                           
          }else if (file.files && file.files[0])
          {
              //其他浏览器
              div.innerHTML = '<img id='+imghead+'>';
              var img = document.getElementById(imghead);
              img.onload = function(){
                var rect = clacImgZoomParam(MAXWIDTH, MAXHEIGHT, img.offsetWidth, img.offsetHeight);
                img.width = width;
                img.height = height;
               
              }
              var reader = new FileReader();
              reader.onload = function(evt){img.src = evt.target.result;}
              reader.readAsDataURL(file.files[0]);
          }
          else
          {
            var sFilter='filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src="http://ayue05.blog.163.com/blog/';
            file.select();
            var src = document.selection.createRange().text;
            div.innerHTML = '<img id='+imghead+'>';
            var img = document.getElementById(imghead);
            img.filters.item('DXImageTransform.Microsoft.AlphaImageLoader').src = src;
            var rect = clacImgZoomParam(MAXWIDTH, MAXHEIGHT, img.offsetWidth, img.offsetHeight);
            status =('rect:'+rect.top+','+rect.left+','+rect.width+','+rect.height);
            div.innerHTML = "<div id="divhead" style='"+rect.width+"px;height:"+rect.height+"px;margin-top:"+rect.top+"px;margin-left:"+rect.left+"px;"+sFilter+src+""'></div>";
          }
         
        }
    IMGJS


    jquery-1.7.2.min.js

    jquery-1.7.2.min.js
  • 相关阅读:
    Python基础-time and datetime
    Python基础-包
    Python基础-常用模块
    第四十七天Python学习记录
    第四十四天Python学习记录
    如何教你在NIPS会议上批量下载历年的pdf文档(另附04~14年NIPS论文下载链接)
    如何用pdfbox-app-1.8.10.jar批处理将pdf文档转换成text文档
    如何在Win10下设置图片的浏览方式为windows照片查看器
    如何不通过系统升级来安装window10正式版?(特别针对Xp用户)
    Mysql统计信息处理及binlog解释
  • 原文地址:https://www.cnblogs.com/wybshyy/p/13783810.html
Copyright © 2020-2023  润新知