最近的项目要用到这块，但是在网上找了很多资料，很多都是假的，都不行，最后终于找到一个，还是可以兼容主流的，特分享给大家，可以用

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 <html xmlns="http://www.w3.org/1999/xhtml" >

 <head>

 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

 <title>本地图片预览</title>

 <style type="text/css">

 #preview{width:198px;height:148px;border:1px solid #000;overflow:hidden;}

 #imghead {filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=image);}

 </style>

 <script type="text/javascript">

 function previewImage(file)

 {

   var MAXWIDTH  = 198;

   var MAXHEIGHT = 148;

   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;

       img.style.marginLeft = rect.left+'px';

       img.style.marginTop = rect.top+'px';

     }

     var reader = new FileReader();

     reader.onload = function(evt){img.src = evt.target.result;}

     reader.readAsDataURL(file.files[0]);

   }

   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:'+rect.top+','+rect.left+','+rect.width+','+rect.height);

     div.innerHTML = "<div id=divhead style='width:"+rect.width+"px;height:"+rect.height+"px;margin-top:"+rect.top+"px;margin-left:"+rect.left+"px;"+sFilter+src+"\"'></div>";

   }

 }

 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;

 }

 </script>

 </head>

 <body>

 <div id="preview">

     <img id="imghead" width=198 height=148 border=0 src='' />

 </div>

     <br/>

     <input type="file" onchange="previewImage(this)" />

 </body>

 </html>

如果ie9要用的话，还要修改安全配置

Internet选项 -> 安全 -> 自定义级 别 -> 将本地文件上载至服务器时包含本地目录路径 -> 选“启 动” -> 确定

当然不能要求用户来修改，其实可以查询，如果没有获取到的话，就显示默认图片，这个大家自己改了哦！

javascript 上传 预览图片 兼容 谷歌 ie的更多相关文章

  1. 图片上传预览，兼容IE

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

  2. 微信开发中使用微信JSSDK和使用URL.createObjectURL上传预览图片的不同处理对比

    在做微信公众号或者企业微信开发业务应用的时候,我们常常会涉及到图片预览.上传等的处理,往往业务需求不止一张图片,因此相对来说,需要考虑的全面一些,用户还需要对图片进行预览和相应的处理,在开始的时候我使 ...

  3. 异步上传&预览图片-不压缩图片

    本例使用ajaxFileUpload异步上传预览图片 <bean id="multipartResolver" class="org.springframework ...

  4. 上传预览图片的插件jquery-fileupload

    上传预览图片的插件jquery-fileupload github地址:https://github.com/blueimp/jQuery-File-Upload 中文文档:http://www.jq ...

  5. 上传预览图片自己做的.md

    1.无插件预览(window.URL.createObjectURL) ```javascript //demo 图片预览  单个 $(".demo input#demo_file" ...

  6. 异步上传&预览图片-压缩图片

    移动端普及的时代,流量是用户最关心的,手机拍出来的照片基本上都在1~2M以上,这样上传会非常耗流量,影响用户体验,此例能在保证清晰度的情况下,将4.5M的图片压缩为30K <!DOCTYPE h ...

  7. html 上传预览图片

    直接上代码了 <!DOCTYPE html> <html><head lang="en"><meta http-equiv="C ...

  8. Vue 中使用 viewerjs进行本地上传预览图片

    https://www.cnblogs.com/shenjp/p/9754171.html 如果图片路径是 接口的返回信息的话,将路径存储在数组中,在this.$nextTick中实例化Viewer: ...

  9. 兼容好的JS图片上传预览代码

    转 : http://www.codefans.net/articles/1395.shtml 兼容好的JS图片上传预览代码 (谷歌,IE11) <html xmlns="http:/ ...

随机推荐

  1. Android. Scrolling 2 listviews together

    OK. What I'm trying to achieve is a layout that does the same effect as frozen panes in Excel. That ...

  2. android学习日记0--开发需要掌握的技能

    一.开发android,我们需要哪些技能基础 1.Java基础知识 2.Linux基础知识 3.数据库基础知识 4.网络协议 5.Android基础知识 6.服务器端开发知识 1.Java基础知识 很 ...

  3. mysqldump原理3

    现网中数据库运维时,要经常对数据库做热备.为保证恢复时数据的完整性与一致性, 一种方法是在备份之前锁表,但锁表会影响正在运行的业务. mysqldump是当前MySQL中最常用的备份工具,通过mysq ...

  4. devenv.exe - Assert Failure visual studio 2010

    安装完成devexpress后启动vs提示 devenv.exe - assert failure  第一种在博客园找到的解决方案: 原因是机器上安装了framework 4.5 和4.5中文包,卸载 ...

  5. PHP中的全局变量$_SERVER

    1.常用 $_SERVER['PHP_SELF'] #当前正在执行脚本的文件名,与 document root相关.$_SERVER['argv'] #传递给该脚本的参数.$_SERVER['argc ...

  6. Apache rewrite 详解

    用rewrite可实现的部分:URL根目录搬迁,多目录查找资源,阻止盗连你的图片,拒绝某些主机访问,基于时间重写,据浏览器类型重写,动态镜像远程资源,外部重写程序模板,等等 详见下表: 目标 重写设置 ...

  7. Socket异步通信学习三

    接下来是客户端部分,采用同步接收模式,在SocketClient项目中新建了一个SynServer类,用于存放socket服务器代码,和AsynServer类似,主要有4个方法: 有一个全局socke ...

  8. 面试体验：Google 篇（转）

    http://www.cnblogs.com/cathsfz/archive/2012/08/08/google-interview-experience.html 尝试在自己的博客上搜索点东西,结果 ...

  9. 【暴力模拟】UVA 1594 - Ducci Sequence

    想麻烦了.这题真的那么水啊..直接暴力模拟,1000次(看了网上的200次就能A)后判断是否全为0,否则就是LOOP: #include <iostream> #include <s ...

  10. css扁平化博客学习总结（一）模块分析

    一.模块分析 1.每开发一个项目之前,首先要对项目进行一个大致规划,它到底要做什么功能,它有什么具体需求. 2.所以需要进行模块化分析,把这些东西具象化,把一个问题模块化,对需求有一个宏观的了解. 3 ...