代码如下

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

js实现form表单提交，图片预览功能的更多相关文章

  1. js模拟form表单提交数据, js模拟a标签点击跳转，避开使用window.open引起来的浏览器阻止问题

    js模拟form表单提交数据, js模拟a标签点击跳转,避开使用window.open引起来的浏览器阻止问题 js模拟form表单提交数据源码: /** * js模拟form表单提交 * @param ...

  2. js的form表单提交url传参数（包含+等特殊字符）的解决方法

    方法一:(伪装form表单提交) linkredwin = function(A,B,C,D,E,F,G){        var formredwin = document.createElemen ...

  3. JavaScript - 表单提交前预览图片

    其实这东西网上到处都是,但并不完整. 正好我也遇到了这个问题,不仅仅是预览,还需要得到图片的属性. 于是东凑西凑整理出一个完整的版本,并根据个人的理解加上了一点点说明. 首先做一些准备工作,HTML方 ...

  4. from表单，图片预览，和表单提交

    <form> <input id="file" class="topsub-file" type="file" name= ...

  5. js阻止form表单重复提交

    防止表单重复提交的方法总体来说有两种,一种是在js中阻止重复提交:另一种是在后台利用token令牌实现,大致思路是生成一个随机码放到session和form表单的隐藏输入框中,提交表单时两者对比,表单 ...

  6. Form表单提交，js验证

    Form表单提交,js验证 1,  Onclick() 2, Onsubmit() Button标签 input (属性 submit  button )标签 Input type=button    ...

  7. js_ajax模拟form表单提交_多文件上传_支持单个删除

    需求场景: 用一个input type="file"按钮上传多张图片,可多次上传,可单独删除,最后使用ajax模拟form表单提交功能提交到指定方法中: 问题:由于只有一个file ...

  8. 原生js实现ajax的文件异步提交功能、图片预览功能.实例

    采用html5使得选择图片改变时,预览框中图片随之改变.input文件选择框美化.原生js完成文件异步提交 效果图: 代码如下,可直接复制并保存为html文件打开查看效果 <html> & ...

  9. form表单提交file

    form表单提交文件,这毫无疑问不是个好办法.但是,存在既有意义.既然H5都还让着东西存在着,呢么必然有其意义. form表单中的input type=file这个空间,不得不说奇丑无比!问题是还不能 ...

随机推荐

  1. lua实现多继承

    http://my.oschina.net/u/156466/blog/401576local class1 = {} function class1:new() local obj = {} set ...

  2. 文件上传利器SWFUpload使用指南(转)

    http://www.cnblogs.com/2050/archive/2012/08/29/2662932.html 文件上传利器SWFUpload使用指南 SWFUpload是一个flash和js ...

  3. 使用DBCC CHECKIDENT重置自增标识

    原来ID=8的记录删除后, 下一个Insert记录为9 当插入ID=10的记录后, 使用 ) 当再次Insert记录, 就会是ID为8. 不过以上不是真实的使用场景, 以上情况应该插入包含ID的记录就 ...

  4. 介绍一款管理软件Redmine

    Redmine是用Ruby开发的基于web的项目管理软件,是用ROR框架开发的一套跨平台项目管理系统,据说是源于Basecamp的ror版而来,支持多种数据库,有不少自己独特的功能,例如提供wiki. ...

  5. 时间的获取和转换，C#和Sql

    我们可以通过使用DataTime这个类来获取当前的时间.通过调用类中的各种方法我们可以获取不同的时间:如:日期(2008-09-04).时间(12:12:12).日期+时间(2008-09-04 12 ...

  6. css基础之 id和选择器

    id 和 class 选择器 如果你要在HTML元素中设置CSS样式,你需要在元素中设置"id" 和 "class"选择器. (1) id 选择器 id 选择器 ...

  7. Android 贝塞尔曲线

    博客图片备份位置:

  8. RemoteViews的理解和使用

    一.RemoteViews简介 作用:跨进程更新界面                         使用场景:通知栏.桌面小部件 二.在通知栏上的应用 原理:通过RemoteViews加载布局,通过 ...

  9. 国内好用的公用DNS 服务器。

    阿里 AliDNS 223.5.5.5 223.6.6.6 CNNIC SDNS 1.2.4.8 210.2.4.8 Google DNS 8.8.8.8 8.8.4.4 OpenDNS 208.67 ...

  10. C语言--关键字、标识（zhi）符、注释

    一.关键字 1. 关键字 是C语言中提供的有特殊含义的符号,同时也叫做保留字,在C语言中关键字一共有32个,它们分别被赋予了特殊的含义.如:main.int.struct等等. 2. 关键字的特征 1 ...