实现要点

 

● 对于 Chrome、Firefox、IE10 使用 FileReader 来实现。

● 对于 IE6~9 使用滤镜 filter:progid:DXImageTransform.Microsoft.AlphaImageLoader 来实现。

 

实现代码

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<style type="text/css">
#preview, .img, img
{
width:200px;
height:200px;
}
#preview
{
border:1px solid #000;
}
</style>
</head>
<body>
<div id="preview"></div>
<input type="file" onchange="preview(this)" />
<script type="text/javascript">
function preview(file)
{
var prevDiv = document.getElementById('preview');
if (file.files && file.files[0])
{
var reader = new FileReader();
reader.onload = function(evt){
prevDiv.innerHTML = '<img src="' + evt.target.result + '" />';
}
reader.readAsDataURL(file.files[0]);
}
else
{
prevDiv.innerHTML = '<div class="img" style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src=\'' + file.value + '\'"></div>';
}
}
</script>
</body>
</html>

图片预览JavaScript方法的更多相关文章

  1. 兼容最新firefox、chrome和IE的javascript图片预览实现代码

    这篇文章主要介绍了兼容最新firefox.chrome和IE的javascript图片预览实现代码,测试了浏览器firefox6.firefox12.chrome 25.0.1364.172 m.IE ...

  2. javascript 实现图片预览（未上传到服务器端）

    1,图片预览 越来越多的浏览器为了安全,都不能获得文件的,全路径,实现图片预览实现起来有点麻烦.有人选择复制图片到服务器的某个路径下,然后从服务器端找到路径,实现预览.但这不是最佳实现方案,如果用户一 ...

  3. win7中资源管理器不能显示图片预览的解决方法

    在用xp的时候,在资源管理器里面预览图片文件是在普通不过的事情了.换到win7之后,图片文件一直不能预览,只是显示图标还挺烦的.肯定是哪里设置的不对,下午闲来无事,找到是哪里的问题了. 如果你也遇到相 ...

  4. JavaScript图片上传前的图片预览功能

    JS代码: //js本地图片预览,兼容ie[6-9].火狐.Chrome17+.Opera11+.Maxthon3 function PreviewImage(fileObj, imgPreviewI ...

  5. dropzonejs中文翻译手册 DropzoneJS是一个提供文件拖拽上传并且提供图片预览的开源类库.

    http://wxb.github.io/dropzonejs.com.zh-CN/dropzonezh-CN/ 由于项目需要,完成一个web的图片拖拽上传,也就顺便学习和了解了一下前端的比较新的技术 ...

  6. 如何在HTML5 图片预览

    HTML5的 File API允许浏览器访问本地文件系统,借助它我们可以实现以前无法实现的本地图片预览功能. 先介绍下该API实现了那些接口: 1.Blob接口,表示原始的二进制数据,通过它可以访问到 ...

  7. js图片预览插件，不涉及上传

    小小的几十行代码,很牛逼,很实用. 支持多个图片的预览,只要new多个对象就行了. html如下 <!-- zhouxiang www.zhou-xiang.com --> <!DO ...

  8. dwz+jquery+fileupload+springmvc实现文件上传 及图片预览

    1 前台jsp:文件的上传利用了iframe实现局部刷新功能.使用了apache的fileupload组件,用到的jar: commons-fileupload.jar,commons-io.jarD ...

  9. input file样式修改，图片预览删除功能

    本篇对input file进行了修改,改成自己需要的样式,类似验证身份上传身份证图片的功能. 效果图如下: 这里主要展示上传预览图片功能,对于删除功能的html及css写的比较粗糙,对于想要精细表现这 ...

随机推荐

  1. Ubuntu 16.04下使用Wine安装PowerDesigner15

    说明: 1.关于没有.wine文件夹的解决方法:在命令行上运行winecfg: 2.使用的Wine版本是深度出品(Deepin),已经精简了很多没用的配置,使启动能非常快,占用资源小. 下载: (链接 ...

  2. TdxBarButton的FASTSCRIPT封装

    TdxBarButton的FASTSCRIPT封装 // cxg 2017-2-13 unit fs_dev; interface{$i fs.inc}uses fs_iinterpreter, fs ...

  3. 高通msm8994启动流程简单介绍

    处理器信息 8994包括例如以下子系统: 子系统 处理器 含义 APSS 4*Cortex-A53 应用子系统 APSS 4*Cortex-A57 应用子系统 LPASS QDSP6 v5.5A(He ...

  4. [zlib]_[0基础]_[使用Zlib完整解压zip内容]

    场景: 1. 解压文件一般用在下载了一个zip文件之后解压,或者分析某个文件须要解压的操作上. 2. 解压文件,特别是解压带目录的zip文件往往系统没有提供这类Win32 API,当然C#自带库能解压 ...

  5. 串匹配算法讲解 -----BF、KMP算法

      参考文章: http://www.matrix67.com/blog/archives/115     KMP算法详解 http://blog.csdn.net/yaochunnian/artic ...

  6. 我对C语言输入和输出和一些其他的疑惑点

    gets(字符串数组) 用来接收字符串数组 等同于 scanf("%s",字符串数组名)  需要说的一点是 字符串的数组名 就表示数组的第一个元素的地址 所以加不加&取地址 ...

  7. caffe学习--cifar10学习-ubuntu16.04-gtx650tiboost--1g--01

    引用了下文的资料,在此感谢! http://www.cnblogs.com/alexcai/p/5468164.html http://blog.csdn.net/garfielder007/arti ...

  8. PHP框架的基本原理以及选择标准

    PHP框架的原理 说到PHP框架,可能很多PHP新手会感到有些胆怯.其实,PHP框架也不是那么深不可测的,框架就是别人使用PHP基础只是为你写好了的东西,只是封装在一起:这就好比我们使用PHP的函数, ...

  9. Webkit二：RenderTree 创建

    RenderObject 作为所有Render 树节点的基类,完全类似与DOM树中的Node基类,它是构成Render 树的基础,作用非比寻常,其中包含了构成Render 树所可能涉及到的一些基本属性 ...

  10. js 数据获取

    http://www.cnhan.com/shantui/templates/MC500/TP001/js/template.js var qiaoContent="0";//0默 ...