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

时间：2017-04-18 15:50:12 阅读：256 评论：0 收藏：0 [点我收藏+]

很早以前在杭州银行工作曾经碰到这么一个需求，当时也是纠结了很久，也是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代码如下：

复制代码

<p>

</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;

}

页面内容来至网络转载

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

标签：cti 内容 lower cal das 决定 blank 设置网络

原文地址：http://www.cnblogs.com/AaronNotes/p/6727974.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行