Skip to content

Instantly share code, notes, and snippets.

@Gaubee
Created December 5, 2013 09:38
Show Gist options
  • Star 2 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save Gaubee/7802646 to your computer and use it in GitHub Desktop.
Save Gaubee/7802646 to your computer and use it in GitHub Desktop.
JavaScript实现本地图片上传预览功能(兼容IE、chrome、FF) http://www.open-open.com/lib/view/open1340979512683.html
function previewImage(file) {
var porImg = $('#biuuu'), //首先获取大图片jquery对象
viewImg = $('#view'); //小图片jquery对象
//判断该浏览器是否为w3c标准,既非IE浏览器
if (file["files"] && file["files"][0]) {
//使用JavaScript的FileReader对象来读取本地数据,并且将数据结果赋值给image的src,具体该对象如何实现的还未深入研究
var reader = newFileReader();
reader.onload = function(evt) {
porImg.attr({
src: evt.target.result
});
viewImg.attr({
src: evt.target.result
});
}
reader.readAsDataURL(file.files[0]);
}
function previewImage(file) {
var porImg = $('#biuuu'), //首先获取大图片jquery对象
viewImg = $('#view'); //小图片jquery对象
//判断该浏览器是否为w3c标准,既非IE浏览器
if (file["files"] && file["files"][0]) {
//使用JavaScript的FileReader对象来读取本地数据,并且将数据结果赋值给image的src,具体该对象如何实现的还未深入研究
var reader = newFileReader();
reader.onload = function(evt) {
porImg.attr({
src: evt.target.result
});
viewImg.attr({
src: evt.target.result
});
}
reader.readAsDataURL(file.files[0]);
}
//如果是IE浏览器,采用滤镜效果,进行显示,但特别注意的是该滤镜效果使用的对象是div对象,并非img对象,因此我们需要将原有的img对象remove同时生成新的div对象,并且赋值相应的class和id
else {
//创建需要滤镜显示的div的dom对象
var ieImageDom = document.createElement("div");
var proIeImageDom = document.createElement("div");
//设置对象的css属性和原有的img对象属性相同,添加相应的id属性值
$(ieImageDom).css({
float: 'left',
position: 'relative',
overflow: 'hidden',
width: '100px',
height: '100px'
}).attr({
"id": "view"
});
$(proIeImageDom).attr({
"id": "biuuu"
});
//删除原有img对象,append创建div的dom对象
porImg.parent().prepend(proIeImageDom);
porImg.remove();
viewImg.parent().append(ieImageDom);
viewImg.remove();
//采用滤镜效果生成图片预览
file.select();
path = document.selection.createRange().text;
$(ieImageDom).css({
"filter": "progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true',sizingMethod='scale',src=\"" + path + "\")"
});
$(proIeImageDom).css({
"filter": "progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true',sizingMethod='scale',src=\"" + path + "\")"
});
// .style.filter ="progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true',sizingMethod='scale',src=\""+ path + "\")";//使用滤镜效果
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment