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

 <!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. 本地win8系统部署网站遇到的问题

    网站开发环境:vs2013 .操作系统是win8.1系统. iis8   win8系统激活码:00261-30000-00000-AA825 需要部署的网站文件夹放在了桌面上,在iis里配置时,无法启 ...

  2. Fatal error: Using $this when not in object context in 解决方法

    Fatal error: Using $this when not in object context in 解决方法 粗心造成的错误 $this 只存在于下面情况 $obj = new object ...

  3. BZOJ 1199: [HNOI2005]汤姆的游戏 计算几何暴力

    1199: [HNOI2005]汤姆的游戏 Time Limit: 1 Sec Memory Limit: 256 MB 题目连接 http://www.lydsy.com/JudgeOnline/p ...

  4. IntelliTrace 调试、定位异常

    最近看了一个开源数据库管理,然后没有认真看它的配置环境,想看看是什么东西, 然后发现有类型转换的错误,但是一下子也定位不到哪里出错? 所以对于这种一下子找不到异常在哪里的,可以使用intellitra ...

  5. 列式存储 V.S. 行式存储

    列式数据库 http://zh.wikipedia.org/wiki/%E5%88%97%E5%BC%8F%E6%95%B0%E6%8D%AE%E5%BA%93 列式存储与行式存储 http://my ...

  6. 文件和目录之stat、fstat和lstat函数

    #include <sys/stat.h> int stat( const char *restrict pathname, struct stat *restrict buf ); in ...

  7. Asp.Net 之 基本控件FileUpload上传控件

    1.前台代码: <asp:FileUpload ID="FileUpload" runat="server" /> <asp:Button I ...

  8. swift和oc区别----属性部分（参考官方swift2.1文档）

    对于实用过OC的人来说实用swift上手时非常容易的,swift包括了oc的大部分功能,但是swift毕竟是一门新的编程语言,它和OC还是 有很多不同的地方,而且提供了不少新功能,所以本人在读swif ...

  9. mysqldump: Couldn't execute 'SET OPTION SQL_QUOTE_SHOW_CREATE=1': You have an error in your SQL syntax; check the manual t

    1.备份mysql数据库时候出错,导出数据: [root@localhost ~]# mysqldump -uroot -p mysql >/root/bck.sql Enter passwor ...

  10. createjs 使用记录

    createjs由几个库组成: l,easeljs,这个是核心,包括了显示列表.事件机制: 2,preloadjs,用于预加载图片等: 3,tweenjs,用于控制元件的缓动: 4,soundjs,用 ...