// 前提条件: ie浏览器模式下,用户要允许ie默认的加载项;以下兼容ie的方法才会生效

 // 图片上传预览 IE是用了滤镜
 function previewImage(file) {
   var MAXWIDTH = 60;
   var MAXHEIGHT = 60;
   var div = document.getElementById('preview');
   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 = rect.width;
       img.height = rect.height;
     };
     var reader = new FileReader();
     reader.onload = function (evt) {
       img.src = evt.target.result;
     };
     reader.readAsDataURL(file.files[0]);
     div.style.display = "inline-block";
   } else {
     var sFilter = 'filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src="';
     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.left + ',' + rect.width + ',' + rect.height);
     div.innerHTML = "<div id=divhead style='width:" + rect.width + "px;height:" + rect.height + "px;" + sFilter + src + "\"'></div>";
     div.style.display = "inline-block";
   }
 }

 function clacImgZoomParam(maxWidth, maxHeight, width, height) {
   var param = {top: 0, left: 0, width: 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;
 }

原生JS上传,实现预览并且兼容大部分IE的更多相关文章

  1. js上传和预览图片

    [1].[代码] [HTML]代码 跳至 [1] <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ...

  2. 图片上传本地预览。兼容IE7+

    基于JQUERY扩展,图片上传预览插件 目前兼容浏览器(IE 谷歌 火狐) 不支持safari 预览地址:http://www.jinbanmen.com/test/1.html js代码:/**名称 ...

  3. JavaScript 图片的上传前预览(兼容所有浏览器)

    功能描述 通过 JavaScript 实现图片的本地预览(无需上传至服务器),兼容所有浏览器(IE6&IE6+.Chrome.Firefox). 实现要点   ● 对于 Chrome.Fire ...

  4. 前端图片预览,上传前预览,兼容IE7、8、9、10、11,Firefox,Chrome(学习到的知识)

    文章地址:http://www.cnblogs.com/rubylouvre/p/4597344.html 一.window.URL 在Chrome中,window.URL和window.webkit ...

  5. js 上传文件预览

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

  6. js上传并且预览图片

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

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

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

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

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

  9. JavaScrip 原生多文件上传及预览 兼容多浏览器

    JavaScrip 原生多文件上传及预览 兼容多浏览器 html代码块 <div class="container"> <label>请选择一个图像文件:& ...

随机推荐

  1. LINUX交换分区

    交换分区最大容量为64G,最多只能建32个,          创建交换分区 #fdisk /dev/hdaànà+容量àpàt(修改系统ID)à分区号à82àpàw #mkswap /dev/hda ...

  2. matlab之原始处理图像几何变换

    (一)图像几何变换理论知识 (1)图像的平移与比例 图像的平移很简单,平移前后的坐标分别为(x,y)和(x',y'),则满足的关系式为 x'= x +Tx: y'= y +Ty: 其中Tx与Ty分别为 ...

  3. 【左偏树】[APIO2012]派遣

    题意可真的是有毒 第一眼树形背包可做?(反正我没用树形背包打过,边上巨佬打的背包似乎没拿分) 后来发现可以贪心搞,我们先把一个节点所有的儿子都取进去,之后不行的话再从大的开始拿走就好了 问题就变成了了 ...

  4. 【珍惜时间】vuepro

    老规矩放上大大的github开源地址:https://github.com/goodheart222/vuepro 我们再来看看项目的效果,初步根据效果做到心中有数 看到效果的话,我们会发现,肯定是有 ...

  5. 以代码的方式管理quartz定时任务的暂停、重启、删除、添加等

    [前言]在项目的管理功能中,对定时任务的管理有时会很常见.因为我们不能指望只在配置文件中配置好定时任务就行了,因为如果要控制定时任务的 “暂停” 呢?暂停之后又要在某个时间点 “重启” 该定时任务呢? ...

  6. Linux中要重启apache服务与在windows是有很大的区别,下面我们来介绍一下

    在Linux中要重启apache服务与在windows是有很大的区别,下面我们来介绍一下常用的命令,需要的朋友参考下吧(http://www.hnkjlb.com) linux系统为Ubuntu 一. ...

  7. Java参数校验工具validation实践

    介绍 在项目开发当中,数据校验是你必须要考虑和面对的事情,为此要写上一大串的代码进行校验,这样就会导致代码冗余和一些管理的问题. 例如下面的代码: public void push(List<L ...

  8. springboot在工具类中添加service的方法,显示为空的解决方案

    @Component// 1.将工具类声明为spring组件,这个必须不能忘 public class TestUtils { //2.自动注入 @Autowired private ItemServ ...

  9. mysql TO_DAYS()

    mysql TO_DAYS(date) 函数 TO_DAYS(date) 给定一个日期date, 返回一个天数 (从年份0开始的天数 ). mysql> SELECT TO_DAYS(95050 ...

  10. WCF进阶:扩展bindingElementExtensions支持对称加密传输

      前面两篇文章WCF进阶:将编码后的字节流压缩传输和WCF 进阶: 对称加密传输都是实现了自定义编码,那两个例子中托管服务或者客户端调用都采用的代码实现,WCF更友好的方式是在app.config或 ...