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

 <!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. 关于expanded一级二级菜单数据的分组排序

    最新再弄关于expandedlistview相关的东西,所以需求是需要对一级菜单根据时间排序,同时二级菜单也需要根据时间排序,距离现在最近的时间显示在最前面. 效果就是如下: --group2  -- ...

  2. There is no Action mapped for namespace [/pages/action/student] and action name [findStudent]

    1.错误描写叙述 2014-7-13 2:38:54 org.apache.jasper.compiler.TldLocationsCache tldScanJar 信息: At least one ...

  3. Android 电子邮件发送成功与失败的提示

    前言          欢迎大家我分享和推荐好用的代码段~~ 声明          欢迎转载.但请保留文章原始出处:          CSDN:http://www.csdn.net        ...

  4. [Effective C++ --013]以对象管理资源

    这一节基本讲述的是将资源放进管理对象,防止忘记释放资源. 1.一般New和Delete使用场景 void fun() { SimpleClass* pSimpleClass1 = new Simple ...

  5. js代码 设为首页 加入收藏

    // JavaScript Document // 加入收藏 <a onclick="AddFavorite(window.location,document.title)" ...

  6. 聊聊 iOS 开发中的协议

    前言 何为协议,简单来说在OC中我们使用关键字@protocol可以声明一个协议,并在协议中添加多个属性.方法供于遵循者实现,从某个角度上来说,这是一种不同于category机制的category.在 ...

  7. JAXB - Annotations, Controlling Element Selection: XmlAccessorType, XmlTransient

    If JAXB binds a class to XML, then, by default, all public members will be bound, i.e., public gette ...

  8. DOS批处理命令-echo

    Echo 命令 打开回显或关闭请求回显功能,或显示消息.如果没有任何参数,echo 命令将显示当前回显设置. 语法 echo [{on off}] [message]   即是说当echo设置off值 ...

  9. LVS概述

    LVS原理概述: lvs是一个开源软件,是Linux virtual server的简写,即linux虚拟服务器,是一个虚拟的服务器集群系统,lvs集群采用ip负载均衡技术和基于内容的请求分发技术.将 ...

  10. linux 文本编辑器 vim 基本操作

    三种模式之间转换: 一般模式 可用于光标移动.复制粘贴.查找替换 "vim.txt"表示文件名 8L 表示8行 , 80C 表示80个字符 移动光标常用操作: h .j. k. l ...