// 前提条件: 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. UMP系统功能 资源管理

  2. 【珍惜时间】iReport

    项目很点意思,感觉很高超的样子 先放下项目的github地址:https://github.com/tctangyanan/iReport 感谢各位伟大的程序员无私的分享自己的技术 老规矩,我们会运行 ...

  3. Java虚拟机笔记

    Java内存区域划分 1.程序计数器 线程私有,当前线程执行的行号指示器,指向当前线程执行的虚拟机字节码地址,线程的恢复,跳转等都需要用到它 2.Java虚拟机栈 线程私有,虚拟机栈描述的是Java内 ...

  4. js实现iframe刷新

    今天要用到iframe的框架刷新,在网上找到了关于这方面内容,整理如下: (1)一般页面的刷新——reload 方法,该方法强迫浏览器刷新当前页面. 语法:location.reload([bForc ...

  5. codeforces 1100E-Andrew and Taxi

    传送门:QAQQAQ 题意:给你一个图,每条边有边权,现在你可以对边进行反转,使图中不存在环,你需要使得反转的边的边权集合中的最大值最小,并输出任意一组解. 思路:二分+拓扑排序 使得最大值最小,自然 ...

  6. PAT甲级——A1075 PAT Judge

    The ranklist of PAT is generated from the status list, which shows the scores of the submissions. Th ...

  7. Java之io nio aio 的区别

    这个问题最近面试总是遇到,作为一个只会写流水代码的程序员,一脸懵逼.看了网上的解释,看的还是很模糊,说下我对这个的理解. 先引出一个话题,两个大水缸,一个空一个满,让你把一个缸里面的水弄到另一个里面. ...

  8. DEV 皮肤的使用

    一.皮肤的使用 拖入defaultLookAndFeel 组件到窗体中 拖入ribbonControl 控件到窗体中 将窗体继承为 DevExpress.XtraBars.Ribbon.RibbonF ...

  9. PostgreSQL DISTINCT ON

    https://stackoverflow.com/questions/3800551/select-first-row-in-each-group-by-group select DISTINCT ...

  10. At- Linux必学的60个命令

    1.作用 at命令用来在指定时刻执行指定的命令序列. 2.格式 at [-V] [-q x] [-f file] [-m] time 3.主要参数 -V:显示标准错误输出. -q:许多队列输出. -f ...