直接上代码：

经测试，除safari6包括6以下不支持，其他均可正常显示。

原因：safari6不支持filereader，同时不能使用IE滤镜导致失效。

fix: 可以利用canvas，解决safari6的问题

<!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:260px;height:190px;border:1px solid #000;overflow:hidden;}

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

</style>

<script type="text/javascript">

        //图片上传预览    IE是用了滤镜。

        function previewImage(file)

        {

          var MAXWIDTH  = 260;

          var MAXHEIGHT = 180;

          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 //兼容IE

          {

            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;"+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=100 height=100 border=0 src=''>

</div>

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

</body>

</html>

　　

利用js加载本地图片预览功能的更多相关文章

  1. 自定义type为file型input控件+该控件具有本地图片预览功能

    最近的一个项目需求是写一个type为filex型的input控件,这个控件: 第一,要自定义样式: 第二,要能直接在本地预览上传的图片: 第三,要能检测图片的尺寸是否符合要求. 故综合网上的资源写了下 ...

  2. js本地图片预览代码兼容所有浏览器

    html代码 <div id="divPreview" style="width: 160px; height: 170px"><img id ...

  3. 兼容ie[6-9]、火狐、Chrome、opera、maxthon3、360浏览器的js本地图片预览

    html代码: <div id="divPreview"> <img id="imgHeadPhoto" src="Images/H ...

  4. js本地图片预览，兼容ie[6-9]、火狐、Chrome17+、Opera11+、Maxthon3

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

  5. 浅谈js本地图片预览

    最近在工作中遇到一个问题,就是实现一个反馈页面,这个反馈页面的元素有反馈主题.反馈类型.反馈内容.反馈人联系电话以及反馈图片.前端将这些反馈的元素POST给后台提供的接口:实现这个工作的步骤就是:页面 ...

  6. Atitit. IE8.0 显示本地图片预览解决方案 img.src=本地图片路径无效的解决方案

    Atitit. IE8.0 显示本地图片预览解决方案 img.src=本地图片路径无效的解决方案 1. IE8.0 显示本地图片 img.src=本地图片路径无效的解决方案1 1.1. div来完成  ...

  7. 如何通过js实现图片预览功能

    一.效果预览 效果图: 二.实现代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &quo ...

  8. 原生JS实现图片预览功能

    html代码: <div class="album-new fr"> <div class="upload-btn btn-new container& ...

  9. android ImageLoader加载本地图片的工具类

    import android.widget.ImageView; import com.nostra13.universalimageloader.core.ImageLoader; /** * 异步 ...

随机推荐

  1. HDU Collect More Jewels 1044

    BFS + 状态压缩 险过 这个并不是最好的算法 但是写起来比较简单 , 可以AC,但是耗时比较多 下面是代码 就不多说了 #include <cstdio> #include <c ...

  2. （转载）PHP静态方法

    (转载)Lamp兄弟连PHP 6.静态方法(static修饰的方法),不能访问非静态成员(在非静态的方法中,可以访问静态成员).因为非静态的成员,就必须用对象来访问,访问内部的成员使用的就是$this ...

  3. Oracle 11g ORA-12514:TNS:监听程序当前无法识别连接描述符中请求的服务

    1. 找到listener.ora监听文件,具体位置:D:\app\Administrator\product\11.2.0\dbhome_1\NETWORK\ADMIN\listener.ora 2 ...

  4. [经典] 在未排序数组中返回topK大的数

    解法一,排序 先从大到小快排,然后扫前K个返回 时间复杂度:O(NlogN),空间复杂度O(1) 解法二,优先队列 前K个放入优先队列中,与最小堆顶元素比较大小,若大于则删除堆顶并插入:否则跳过 时间 ...

  5. poj 1149 最大流

    题目链接:http://poj.org/problem?id=1149 #include <cstdio> #include <cmath> #include <algo ...

  6. Monad

    Monad英文含义,单体.单分子.单细胞. Monad是一种设计模式,表示将一个运算过程,通过函数拆解成互相连接的多个步骤.你只要提供下一步运算所需的函数,整个运算就会自动进行下去.

  7. SQL读取XML字段类型的信息

    USE CSOS_NEW_2 GO --(1)定义临时表 DECLARE @table TABLE(id INT IDENTITY(1,1),XMLDetail XML) DECLARE @xml X ...

  8. php导出excel不断刷新缓冲区的思路(转)

    require('./db.class.php');$DB = new db();$DB->connect();//数据库链接 header("Content-Type: text/c ...

  9. Percona Live 2016 PPT整理-zhaiwx_yinfeng

    https://yq.aliyun.com/articles/54454?spm=5176.100239.bloglist.32.CllwIr

  10. android图片处理方法（转）

    //压缩图片大小 public static Bitmap compressImage(Bitmap image) { ByteArrayOutputStream baos = new ByteArr ...