JS兼容各个浏览器的本地图片上传即时预览效果

很早以前在工作曾经碰到这么一个需求，当时也是纠结了很久，也是google了很久，没有碰到合适的demo，今天特意研究了下这方面的的问题，所以也就做了个简单的demo来实现本地上传图片即时预览效果。其在标准浏览器(firefox,chrome，IE10等其他浏览器)用了HTML5中的内容实现图片即时预览效果。在IE10以下浏览器用了滤镜来解决图片显示问题。在看代码之前，先让我们来了解以下知识点：

HTML5中的FileReader对象： FileReader对象主要是把文件读入内存中，并且读取文件中数据。目前为止，firefox3.6+ chrome6+ Safari5.2+ Opera11+及IE10浏览器支持FileReader对象。它有以下5种方法：

1. readBinaryString

2. readAsText

3. readAsDataURL 将对象或文件中的数据读取为一串DataURL字符串，就是将数据以一种特殊格式的URL地址形式直接读入页面。

4. readAsArrayBuffer

5. abort.

而我们现在要用的是第三种，所以解释了下，其他的具体可以看相关的资料，这里不多解释。

IE：document.selection 即资料解释如下：

selection 对象代表了当前激活选中区，即高亮文本块，和/或文档中用户可执行某些操作的其它元素。
selection 对象的典型用途是作为用户的输入，以便识别正在对文档的哪一部分正在处理，或者作为某一操作的结果输出给用户。

用户和脚本都可以创建选中区。用户创建选中区的办法是拖曳文档的一部分。脚本创建选中区的办法是在文本区域或类似对象上调用 select 方法。要获取当前选中区，请对 document 对象应用 selection 关键字。要对选中区执行操作，请先用 createRange 方法从选中区创建一个文本区域对象。
一个文档同一时间只能有一个选中区。选中区的类型决定了其中为空或者包含文本和/或元素块。尽管空的选中区不包含任何内容，你仍然可以用它作为文档中的位置标志。

下面是JSFiddle 中的DEMO链接如下：

想要查看效果，请点击我！

下面是HTML代码如下：

<form enctype="multipart/form-data" name="form1"><input id="f" type="file" name="f" onchange="change()" /><div class="upload">上传图片</div><p>预览:</p><p><img id="preview" alt="" name="pic" /></p>
</form>

JS代码如下：

function change() {var pic = document.getElementById("preview"),file = document.getElementById("f");var ext=file.value.substring(file.value.lastIndexOf(".")+1).toLowerCase();// gif在IE浏览器暂时无法显示if(ext!='png'&&ext!='jpg'&&ext!='jpeg'){alert("图片的格式必须为png或者jpg或者jpeg格式！"); return;}var isIE = navigator.userAgent.match(/MSIE/)!= null,isIE6 = navigator.userAgent.match(/MSIE 6.0/)!= null;if(isIE) {file.select();var reallocalpath = document.selection.createRange().text;// IE6浏览器设置img的src为本地路径可以直接显示图片if (isIE6) {pic.src = reallocalpath;}else {// 非IE6版本的IE由于安全问题直接设置img的src无法显示本地图片，但是可以通过滤镜来实现pic.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='image',src=\"" + reallocalpath + "\")";// 设置img的src为base64编码的透明图片 取消显示浏览器默认图片pic.src = 'data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==';}}else {html5Reader(file);}
}function html5Reader(file){var file = file.files[0];var reader = new FileReader();reader.readAsDataURL(file);reader.onload = function(e){var pic = document.getElementById("preview");pic.src=this.result;}}

本地Demo下载

JS兼容各个浏览器的本地图片上传即时预览效果相关推荐

php+jquery实现图片上传预览_和拖动位置值,PHP教程：thinkphp jquery实现图片上传和预览效果...
<PHP教程:thinkphp jquery实现图片上传和预览效果>要点: 本文介绍了PHP教程:thinkphp jquery实现图片上传和预览效果,希望对您有用.如果有疑问,可以联系我 ...
图片上传实时预览效果
一. 创建一个文件上传的input框 id为doc /这是图片上传的input框 <input type='file' id='doc' name='pic' style='width:60px ...
android 图片预览动画,Android图片上传实现预览效果
首先具体分析一下,实现的功能,其中需求分析是必不可少的,需求.逻辑清除之后,再上手写代码,思路会很清晰. 1.多图上传首先得选择图片(这里项目需求是既可以拍照上传也可以从相册中选择) 2.拍照上传很简 ...
input文件框选择本地图片后页面预览图片并获取图片长宽以及大小图片上传前预览
前面有转过一篇通过HTML5来实现图片上传前预览 ,现在借助FileReader也实现了这个需求.并且同时还可以获得图片的长宽相素以及图片文件的大小.demo如下: <html> < ...
html之file标签 --- 图片上传前预览 -- FileReader
记得以前做网站时,曾经需要实现一个图片上传到服务器前,先预览的功能.当时用html的<input type="file"/>标签一直实现不了,最后舍弃了这个标签,使用了 ...
ajax上传图片并显示,Ajax实现图片上传并预览
效果见尾部. 最近在使用ThinkPHP5开发项目中客户有一个需求是在图片上传时附带预览功能.虽然现在有很多的插件能实现,但是还是觉得自己写比较好.我们知道,图片上传需要一个input:file表单 ...
MUI学习笔记之图片上传和预览
MUI学习笔记之图片上传和预览源代码是从博客园下载我一边学习,一边注释,力求理解 <head> <meta charset="UTF-8"> <m ...
微信小程序删除服务器图片,微信小程序实现图片上传放大预览删除代码
本文实例为大家分享了微信小程序图片上传放大预览的具体代码,供大家参考,具体内容如下 image.js代码: = 9) { this.setData({ lenMore: 1 }); setTimeou ...
html5图片上传与预览实现
最近做项目需要用到图片上传与预览功能,由于是用于手机端,所以研究了下H5的实现方式. 图片预览首先,解决图片预览问题.在html5中,提供了FileReader来读取本地文件,使我们可以实现图片预览 ...

JS兼容各个浏览器的本地图片上传即时预览效果

JS兼容各个浏览器的本地图片上传即时预览效果相关推荐

最新文章

热门文章