// 前提条件: 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. Ip- Linux必学的60个命令

    1.作用 ip是iproute2软件包里面的一个强大的网络配置工具,它能够替代一些传统的网络管理工具,例如ifconfig.route等,使用权限为超级用户.几乎所有的Linux发行版本都支持该命令. ...

  2. AJAX相关概念及应用

    1.Ajax(Asynchronous JavaScript And XML) 异步的JavaScript和XML XML 可扩展标记语言 Ajax是常用的WEB开发技术,是联系前端和后端的桥梁 应用 ...

  3. css实现字母或数字强制换行

    //换行white-space:normal;word-break:break-all;word-wrap: break-word; 相关属性white-space: normal|pre|nowra ...

  4. input 的 placeholder 样式修改

    input::-webkit-input-placeholder{ color:#999999; } input::-moz-placeholder{ /* Mozilla Firefox 19+ * ...

  5. 使用RequestsCookieJar自动保存并传递cookie

    使用python的requests开发爬虫程序的时候,经常需要将之前请求返回的cookie值作为下一个请求的cookie进行调用,比如模拟登录之后的返回的sessionID,就是需要作为后续请求的co ...

  6. CAS服务端配置

    1. 产生SERVER的证书库文件 ketool工具详细运用:http://www.micmiu.com/lang/java/keytool-start-guide/ 首先确保jdk环境变了正确配置才 ...

  7. 第一次个人项目【词频统计】——PSP表格

    PSP2.1 任务内容 计划完成需要的时间(min) 实际完成需要的时间(min) Planning 计划 45 40 Estimate 估计这个任务需要多少时间,并规划大致工作步骤 30 20 De ...

  8. Region服务器工作原理

  9. Python3读取深度学习CIFAR-10数据集出现的若干问题解决

    今天在看网上的视频学习深度学习的时候,用到了CIFAR-10数据集.当我兴高采烈的运行代码时,却发现了一些错误: # -*- coding: utf-8 -*- import pickle as p ...

  10. UDP和TCP的区别?

    区别总结: 1.TCP面向连接,UDP的面向无连接的,即发送数据之前不需要建立简介. 2.TCP提供可靠的数据传输,有发送应答机制,超时重传机制,错误校验机制,流量控制机制保证传输的安全,不丢失,不重 ...