1. [1].[代码] [HTML]代码 跳至 [1]
  2.  
  3. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  4. <html xmlns="http://www.w3.org/1999/xhtml" >
  5.  
  6. <head>
  7. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  8. <title>图片上传本地预览</title>
  9. <style type="text/css">
  10. #preview{width:260px;height:190px;border:1px solid #000;overflow:hidden;}
  11. #imghead {filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=image);}
  12. </style>
  13. <script type="text/javascript">
  14.  
  15.                 //图片上传预览    IE是用了滤镜。
  16.         function previewImage(file)
  17.         {
  18.           var MAXWIDTH  = 260;
  19.           var MAXHEIGHT = 180;
  20.           var div = document.getElementById('preview');
  21.           if (file.files && file.files[0])
  22.           {
  23.               div.innerHTML ='<img id=imghead>';
  24.               var img = document.getElementById('imghead');
  25.               img.onload = function(){
  26.                 var rect = clacImgZoomParam(MAXWIDTH, MAXHEIGHT, img.offsetWidth, img.offsetHeight);
  27.                 img.width  =  rect.width;
  28.                 img.height =  rect.height;
  29. //                 img.style.marginLeft = rect.left+'px';
  30.                 img.style.marginTop = rect.top+'px';
  31.               }
  32.               var reader = new FileReader();
  33.               reader.onload = function(evt){img.src = evt.target.result;}
  34.               reader.readAsDataURL(file.files[0]);
  35.           }
  36.           else //兼容IE
  37.           {
  38.             var sFilter='filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src="';
  39.             file.select();
  40.             var src = document.selection.createRange().text;
  41.             div.innerHTML = '<img id=imghead>';
  42.             var img = document.getElementById('imghead');
  43.             img.filters.item('DXImageTransform.Microsoft.AlphaImageLoader').src = src;
  44.             var rect = clacImgZoomParam(MAXWIDTH, MAXHEIGHT, img.offsetWidth, img.offsetHeight);
  45.             status =('rect:'+rect.top+','+rect.left+','+rect.width+','+rect.height);
  46.             div.innerHTML = "<div id=divhead style='width:"+rect.width+"px;height:"+rect.height+"px;margin-top:"+rect.top+"px;"+sFilter+src+"\"'></div>";
  47.           }
  48.         }
  49.         function clacImgZoomParam( maxWidth, maxHeight, width, height ){
  50.             var param = {top:0, left:0, width:width, height:height};
  51.             if( width>maxWidth || height>maxHeight )
  52.             {
  53.                 rateWidth = width / maxWidth;
  54.                 rateHeight = height / maxHeight;
  55.  
  56.                 if( rateWidth > rateHeight )
  57.                 {
  58.                     param.width =  maxWidth;
  59.                     param.height = Math.round(height / rateWidth);
  60.                 }else
  61.                 {
  62.                     param.width = Math.round(width / rateHeight);
  63.                     param.height = maxHeight;
  64.                 }
  65.             }
  66.  
  67.             param.left = Math.round((maxWidth - param.width) / 2);
  68.             param.top = Math.round((maxHeight - param.height) / 2);
  69.             return param;
  70.         }
  71. </script>
  72. </head>
  73. <body>
  74. <div id="preview">
  75.     <img id="imghead" width=100 height=100 border=0 src='<%=request.getContextPath()%>/images/defaul.jpg'>
  76. </div>
  77.  
  78.     <input type="file" onchange="previewImage(this)" />
  79. </body>
  80. </html>

js上传和预览图片的更多相关文章

  1. js上传并且预览图片

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. hTML5实现表单内的上传文件框，上传前预览图片，针刷新预览images

    hTML5实现表单内的上传文件框,上传前预览图片,针刷新预览images, 本例子主要是使用HTML5 的File API,建立一個可存取到该file的url, 一个空的img标签,ID为img0,把 ...

  3. 富文本编辑器handyeditor，上传和预览图片的host地址不一样

    使用富文本编辑器(官网)时,大多时候都会用到图片上传,但是下载的富文本编辑器的默认配置是只有一个上传地址的host的. var he = HE.getEditor('editor', { autoHe ...

  4. 原生JS上传,实现预览并且兼容大部分IE

    // 前提条件: ie浏览器模式下,用户要允许ie默认的加载项:以下兼容ie的方法才会生效 // 图片上传预览 IE是用了滤镜 function previewImage(file) { var MA ...

  5. js 上传文件预览

    1. FILE API html5提供了FIle和FileReader两个方法,可以读取文件信息并读取文件. 2. example <html> <body> <div ...

  6. 【转】HTML5 jQuery图片上传前预览

    hTML5实现表单内的上传文件框,上传前预览图片,针刷新预览images,本例子主要是使用HTML5 的File API,建立一個可存取到该 file的url,一个空的img标签,ID为img0,把选 ...

  7. HTML5 jQuery图片上传前预览

    hTML5实现表单内的上传文件框,上传前预览图片,针刷新预览images,本例子主要是使用HTML5 的File API,建立一個可存取到该file的url,一个空的img标签,ID为img0,把选择 ...

  8. js实现图片上传及预览---------------------->>兼容ie6-8 火狐以及谷歌

    <head runat="server"> <title>图片上传及预览(兼容ie6/7/8 firefox/chrome)</title> & ...

  9. JS兼容各个浏览器的本地图片上传即时预览效果

    JS兼容各个浏览器的本地图片上传即时预览效果 很早以前 在工作曾经碰到这么一个需求,当时也是纠结了很久,也是google了很久,没有碰到合适的demo,今天特意研究了下这方面的的问题,所以也就做了个简 ...

随机推荐

  1. ES6的promise对象研究

    ES6的promise对象研究 什么叫promise? Promise对象可以理解为一次执行的异步操作,使用promise对象之后可以使用一种链式调用的方式来组织代码:让代码更加的直观. 那我们为什么 ...

  2. 理解css中的line-height

    在css中,line-height有下面五种可能的值:我们来看看w3c中列出如下可能值: normal:默认,设置合理的行间距. number:设置数字,此数字会与当前的字体尺寸相乘来设置行间距. l ...

  3. 整理的dedecms标签大全,方便查找

    平时用dedecms开发经常会用到一些标签,特别是首页.栏目页.内容页,这些页面都会用到标签的调用,比如title.keywords.description.arclist.field.body等,为 ...

  4. 想在BD自然排名中脱颖而出吗?加张合适的图片吧！

    经常在BD或gg搜索不难发现有些搜索结果会带有缩略图,类似下图,图文搭配,看着不累 在一大排搜索结果中,都是文字的话,还没认真看就感觉累,如果在这些搜索结果中突然出现一条图文结合的条目,是不是有耳目一 ...

  5. Fifth scrum meeting - 2015/10/30

    概述 从昨天开始,我们的开发工作终于进入了正轨,由于之前没有mooc服务器API接口,一些工作无法进行. 因为我们团队开始开发较晚,因此我们将开发阶段的截至时间定为了下周五,测试阶段则压缩为下周周六和 ...

  6. Linux 4.6分支已到生命尽头 请尽快升级至Linux 4.7.1

    导读 在Linux Kernel 4.7首个维护版本发布的同时,Greg Kroah-Hartman同时也向社区发布了Linux Kernel 4.6.7版本.作为Linux 4.6分支的第7个维护版 ...

  7. Unity3D中定时器的使用

    源地址:http://unity3d.9tech.cn/news/2014/0402/40149.html 在游戏设计过程中定时器是必不可少的工具,我们知道update方法是MonoBehavior中 ...

  8. fastjson 的使用

    json解析:[2]fastjson 使用 http://jingyan.baidu.com/article/c74d6000672e450f6b595d53.html 利用阿里的fastjson包对 ...

  9. 新的开始---cocos2d

    今天是一个新的开始,cocos2d的环境搭配好了,并且打包案桌apk的环境也搭配好了,安卓的这个搭配环境还是出了一点问题,前面弄了两个晚上(11-12.30)没弄出来,中间好几天都没有去弄,今天光棍节 ...

  10. [codeforces 516]A. Drazil and Factorial

    [codeforces 516]A. Drazil and Factorial 试题描述 Drazil is playing a math game with Varda. Let's define  ...