html点击上传图片兼容ie,js图片上传前预览功能(兼容所有浏览器)

该博客介绍了一段JavaScript代码,用于在图片上传前进行预览,兼容Chrome、Firefox以及IE6+浏览器。核心是利用FileReader API处理现代浏览器,而对于IE6到9,则采用滤镜技术实现。测试表明,该方法在IE8+浏览器中有效,但在IE7下存在问题。
摘要由CSDN通过智能技术生成

网上找到的一份文件上传前预览的代码,转自JavaScript 图片的上传前预览(兼容所有浏览器)

#preview,

.img,

img {

width: 200px;

height: 200px;

}

#preview {

border: 1px solid #000;

}

function preview(file) {

var prevDiv = document.getElementById('preview');

if (file.files && file.files[0]) {

var reader = new FileReader();

reader.onload = function(evt) {

prevDiv.innerHTML = ''%20+%20evt.target.result%20+%20'';

}

reader.readAsDataURL(file.files[0]);

} else {

prevDiv.innerHTML = '

}

}

实现要点

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

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

测试了一下IE8+都没有问题。但是IE7下file.value被浏览器去掉了文件路径分割线从而显示不出来

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值