javascript 上传预览图片兼容谷歌 ie

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

 <!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的更多相关文章

图片上传预览，兼容IE
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
微信开发中使用微信JSSDK和使用URL.createObjectURL上传预览图片的不同处理对比
在做微信公众号或者企业微信开发业务应用的时候,我们常常会涉及到图片预览.上传等的处理,往往业务需求不止一张图片,因此相对来说,需要考虑的全面一些,用户还需要对图片进行预览和相应的处理,在开始的时候我使 ...
异步上传&预览图片-不压缩图片
本例使用ajaxFileUpload异步上传预览图片 <bean id="multipartResolver" class="org.springframework ...
上传预览图片的插件jquery-fileupload
上传预览图片的插件jquery-fileupload github地址:https://github.com/blueimp/jQuery-File-Upload 中文文档:http://www.jq ...
上传预览图片自己做的.md
1.无插件预览(window.URL.createObjectURL) ```javascript //demo 图片预览单个 $(".demo input#demo_file" ...
异步上传&预览图片-压缩图片
移动端普及的时代,流量是用户最关心的,手机拍出来的照片基本上都在1~2M以上,这样上传会非常耗流量,影响用户体验,此例能在保证清晰度的情况下,将4.5M的图片压缩为30K <!DOCTYPE h ...
html 上传预览图片
直接上代码了 <!DOCTYPE html> <html><head lang="en"><meta http-equiv="C ...
Vue 中使用 viewerjs进行本地上传预览图片
https://www.cnblogs.com/shenjp/p/9754171.html 如果图片路径是接口的返回信息的话,将路径存储在数组中,在this.$nextTick中实例化Viewer: ...
兼容好的JS图片上传预览代码
转 : http://www.codefans.net/articles/1395.shtml 兼容好的JS图片上传预览代码 (谷歌,IE11) <html xmlns="http:/ ...

随机推荐

cdll和windll的差别
Python要想调用C语言写的动态连接库.不仅要兼容C接口的调用习惯,还须要兼容C语言的数据类型.幸运的是ctypes库已经做了这双方面的工作.以便调用动态连接库是很方便的.在Hello World的 ...
windows消息钩子
1.消息钩子的概念: Windows应用程序是基于消息驱动的,不论什么线程仅仅要注冊窗体类都会有一个消息队列用于接收用户输入的消息和系统消息.为了拦截消息,Windows提出了钩子的概念.钩子(Hoo ...
Compiling aSmack
For a recent mobile project we used XMPP. It worked really well and I’m keen to use it again. But, i ...
android自动化测试中hierarchyviewer和uiautomatorviewer获取控件信息的方式比对
http://blog.csdn.net/itfootball/article/details/21777835 http://blog.csdn.net/chenbang110/article/de ...
查看Linux主机CPU及内存信息
查看CPU信息(型号) # cat /proc/cpuinfo | grep name | cut -f2 -d: | uniq -c 8 Intel(R) Xeon(R) CPU ...
[RxJS] ReplaySubject
A ReplaySubject caches its values and re-emits them to any Observer that subscrubes late to it. Unli ...
android学习日记03--常用控件ListView
常用控件 8.ListView 列表视图,比如游戏的排行榜.列表数据可以根据屏幕大小自适应列表的显示需要三个元素: a.ListVeiw:用来展示列表的View. b.适配器:用来把数据映射到Lis ...
uboot中gd的定义和使用
近期在做uboot中nand启动相关的工作,遇到一个问题一直纠结着.如今最终明确了这个问题,想想还有好多兄弟在某个黑暗的角落里或者某台电脑前纠结着呢,所以赶紧写下来以供查阅. uboot versio ...
Android 电子邮件发送成功与失败的提示
前言欢迎大家我分享和推荐好用的代码段~~ 声明欢迎转载.但请保留文章原始出处: CSDN:http://www.csdn.net ...
as3调用外部swf里的类的方法
as3项目要调用外部swf里的类有3种方法: 1.将外部的swf发布为swc,使用时将swc引用添加到相应的项目中,这应该是最简单的一种引用.不过当项目中的类或组件比较多时就会使项目发布生成的swf文 ...

javascript 上传 预览图片 兼容 谷歌 ie

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

随机推荐

热门专题

javascript 上传预览图片兼容谷歌 ie

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