直接上代码：

经测试，除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. bzoj3208

    乍一看感觉好神,仔细一看数据范围…… 什么水题啊,直接暴力就可以了…… ..,..] of longint;     v:..,..] of boolean;     i,j,k,a1,a2,b1,b ...

  2. 如何在Sqlserver2000查询分析器中，，在一个库中调用另一个数据库中的数据表

    同一服務器 use aa select * from pubs.dbo.jobs 不同服務器 select * from openrowset('sqloledb','IP地址';'sa';'密碼', ...

  3. PowerDesigner自定义Word导出格式

    本文主要讲解如何将PDM的表结构导出成word以及如何自定义导出格式和显示效果,希望对大家有所帮助...(以下步骤以PowerDesigner 15版本为例) 一.新建导出报表,进入报表设计界面: 1 ...

  4. 安装 macbook 双系统( OS X 和 Ubuntu )

    打算 macbook 上面多安装一个 ubuntu 系统来用下.流程大致下面几步: 1. 备份重要资料 2. 划分硬盘区域用于安装 ubuntu 3. 下载 ubuntu ISO 文件,并刻录到 U ...

  5. 【Cocos2d-X开发学习笔记】第27期：游戏背景之贴图地图类（CCTileMapAtlas）的使用

    本系列学习教程使用的是cocos2d-x-2.1.4(最新版为3.0alpha0-pre) ,PC开发环境Windows7,C++开发环境VS2010 一.贴图地图类CCTileMapAtlas 除了 ...

  6. Python 列表排序方法reverse、sort、sorted详解

    python语言中的列表排序方法有三个:reverse反转/倒序排序.sort正序排序.sorted可以获取排序后的列表.在更高级列表排序中,后两中方法还可以加入条件参数进行排序. reverse() ...

  7. Away3D 4.1.4 中实现骨骼绑定

    骨骼的绑定归根结底就是将目标骨骼的位置以及旋转数据,同步给要绑定的显示对象. 先来看BindingTag.as package away3d.entities {     import away3d. ...

  8. setTimeout的作用以及setTimeout延时0毫秒的作用

    以下代码输出的顺序是? console.log(1); setTimeout(function(){ console.log(2); }, 0); setTimeout(function(){ con ...

  9. iOS开发之监测网络状态

    一.说明 在网络应用中,需要对用户设备的网络状态进行实时监控,有两个目的: (1)让用户了解自己的网络状态,防止一些误会(比如怪应用无能) (2)根据用户的网络状态进行智能处理,节省用户流量,提高用户 ...

  10. Android下 scrollview的滚动停止事件的监听方法

    使用递归调用的方法,每隔5毫秒检查一下是否已经停止,如果已经停止,就拿到事件啦! 不扯蛋,直接上代码. scrollContent就是我的scrollview. [代码]java代码: ? 1 2 3 ...