// 前提条件: 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. 2018-8-10-win10-uwp-如何判断一个对象被移除

    title author date CreateTime categories win10 uwp 如何判断一个对象被移除 lindexi 2018-08-10 19:16:50 +0800 2018 ...

  2. ListControl 设置表格行高与字体

    设置行高: CImageList   m_l;  m_l.Create(1,18,TRUE|ILC_COLOR32,1,0);   listCtrl.SetImageList(&m_l,LVS ...

  3. 环信Demo 导入错误

    今天想导入环信的Demo 去看一看环信学习一下 谁知道导入出现这么个问题 Error:(1, 0) Minimum supported Gradle version is 3.3. Current v ...

  4. wordpress jwt-auth 多语言 jwt_auth_bad_iss的解决方法

    因为目前处理的 wordpress 网站使用了,使用 qtranslate-x 多语言插件 JWT Authentication for WP REST API 插件 rest api 登录 调用wp ...

  5. [转]Entity Framework教程(第二版)

    源起 很多年前刚毕业那阵写过一篇关于Entity Framework的文章,没发首页却得到100+的推荐.可能是当时Entity Framework刚刚发布介绍EF的文章比较少.一晃这么多年过去了,E ...

  6. 导入excel并进行数据提取

    /** * @description: 导入excel并进行数据提取 * @param {type} * @return: */ Vue.prototype.$importExcel = functi ...

  7. leetcode-337-打家劫舍三*

    题目描述: 方法一:递归 # Definition for a binary tree node. # class TreeNode(object): # def __init__(self, x): ...

  8. 关于操作系统中英文切换的.po和.mo介绍

    一.文件简介 .po文件,.mo文件,.pot文件是由gettext程序生成或者使用的源代码和编译结果.   1..pot文件  是一种模板文件,其实质与.po文件一样,其中包含了从源代码中提取所有的 ...

  9. localStorage,sessionStorage,cookie区别

    localStorage:HTML5新增的在浏览器端存储数据的方法.设置和获取localStorage的方法: 设置: localStorage.name = 'zjj'; 获取: localStor ...

  10. SQLServer中使用索引视图

    在SQL Server中,视图是一个保存的T-SQL查询.视图定义由SQL Server保存,以便它能够用作一个虚拟表来简化查询,并给基表增加另一层安全.但是,它并不占用数据库的任何空间.实际上,在你 ...