图片预览兼容IE处理
(IE8 用滤镜实现上传预览图片,解决C:fakepath*.jpg问题,获取本地路径)
html:
<div id="preview"></div> <input type="file" id="file_upl" onchange="imgPreview(this)">
js:
function imgPreview(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 {
var file_upl = document.getElementById('file_upl'); file_upl.select(); var realpath = document.selection.createRange().text; prevDiv.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='scale',src="" + realpath + "")"; } }
在用document.selection前,我们需要先创建选中区。如鼠标选中文本框,即是一个选中区。也可以通过js提供的select()方法创建一个选中区。创建了选中区后,我们就可以通过document.selection获取该选中区。如果要对选中区执行操作,则需要先调用createRange()方法。
//获取上传文件控件的值;
file.select();
var realpath = document.selection.createRange().text;
现有的获取IE低版本上传文件的value值一般都是这种方式,在IE中原本可以直接通过input的value值来获取上传图片的路径,但是在实际中很少看到使用。具体的大家可以去查查资料。
非IE6版本的IE由于安全问题直接设置img的src无法显示本地图片,但是可以通过滤镜来实现。
pic.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='scale',src="" + realpath + "")";