文章目录

在上传一些图片的时候,一般都设计有客户端预览,有了HTML5的FileSystem和canvas后很容易实现,但是古老的IE,特别是IE6除了用flash真的没办法实现了吗?当然不是我们可以用IE的滤镜来实现!
所以我们可以简单的用这2个方法做一个兼容。

1
2
3
4
<div><lable>请选择头像:</lable><input type='file' id="photoFileSel"/></div>
<div id="photoPreview">
<img src="images/default.png" id="doctor_photo"/>
</div>

图片预览实现

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
$("#photoFileSel").bind("change",previewImage);// 当input框选择图片文件后执行预览函数
function previewImage(){
var preview = $("#photoPreview");
// 如果有HTML5中的新属性则使用HTML5,来实现,将图片文件转换成base64代码然后放到img标签的src上(img的src是支持直接放base64代码的)
if("FileReader" in window){
var fileList = this.files;
var imageType = /image.*/;//这里判断了下文件的type,当用户选择的非图片文件就不做预览处理了
for (var i = 0; i < fileList.length; i++) {
var file = fileList[i];
if (!file.type.match(imageType)) {
continue;
}
var reader = new FileReader();
reader.onload = function (e) {
fileName = e.target.result;
preview.find('img').attr("src",fileName);
};
reader.readAsDataURL(file);
}
}else{// 如果没有则使用IE的滤镜,就是把选择图片的觉得路径赋给AlphaImageLoader
preview.find('img').attr("src",'');
this.select();
this.blur();
var fileName=document.selection.createRange().text;
preview.attr("style", "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale);");
preview.prop("filters").item('DXImageTransform.Microsoft.AlphaImageLoader').src = fileName;
}
}

看看效果


请选择头像:




此文是本站原创,转载请标注作者和链接出处!