1. ie10 标准文档模式下 上传的图片不能正常 这时候有解决办法添加以下代码至head中:
<meta http-equiv="X-UA-Compatible" content="IE=9">
2. 由于ie不兼容find() 这时候赋值img的时候需要换一种方式,判断是否是ie内核:
贴上以下代码:
html:
<div class="imgitem secondImg">
<div class="u-add-img-icon"></div>
<input id="fileImage2" type="file" multiple="" class="u-fileInput">
<div class="imgcontainer"><img src="" alt="" class="idImg"/></div>
</div>
<!-- 放大图 -->
<div class="big_ime_one">
<img id="big_img" src=""/>
</div>
<div class="big_ime_make_one"></div>
<!-- 放大图 -->
css:
.imgitem {width: 58px;height: 84px;display: inline-block;text-align: center;line-height: 160px;position: relative;}
.u-fileInput{width: 58px;height: 84px;overflow: hidden;position: absolute;right: 0;top: 0;opacity: 0;filter: alpha(opacity=0); cursor: pointer; }
.u-add-img-icon {width: 58px; height: 84px; background: url(Images/setshop.png) no-repeat; display: inline-block; vertical-align: middle;}
.imgcontainer{width:58px;height:84px;position:absolute;right:0;top:0;display:none;}
.imgcontainer img{width:58px;height:84px;}
.big_ime_make_one {text-align:center;z-index: 9998;position:fixed;top:0;left:0;width:100%;height:100%;
background:#000;opacity:0.4;filter:alpha(opacity=40);display:none}
.big_ime_one {z-index:9999;position:fixed;top:3%;left:30%;display:none;text-align:center; }
js插件:
jQuery.fn.extend({
uploadPreview: function (opts) {
var _self = this,
_this = $(this);
opts = jQuery.extend({
imgObj: null,
type: ["gif", "jpeg", "jpg", "bmp", "png"],
callback: function () {}
}, opts || {});
_self.getObjectURL = function (file) {
var url = null;
if (window.createObjectURL != undefined) {
url = window.createObjectURL(file)
} else if (window.URL != undefined) {
url = window.URL.createObjectURL(file)
} else if (window.webkitURL != undefined) {
url = window.webkitURL.createObjectURL(file)
}
return url
};
_this.change(function () {
if (this.value) {
if(!opts.imgObj){
return;
}
if (!RegExp("\.(" + opts.type.join("|") + ")$", "i").test(this.value.toLowerCase())) {
alert("文件格式错误,必须是" + opts.type.join("，") + "中的一种");
this.value = "";
return false
}
if (document.selection) {
try {
opts.imgObj.attr('src', _self.getObjectURL(this.files[0]))
} catch (e) {
var src = "";
var obj = opts.imgObj;
var div = obj.parent("div")[0];
_self.select();
if (top != self) {
window.parent.document.body.focus()
} else {
_self.blur()
}
src = document.selection.createRange().text;
document.selection.empty();
obj.hide();
obj.parent("div").css({
'filter': 'progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)'
});
div.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = src;
console.log(div.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = src);
}
} else {
opts.imgObj.attr('src', _self.getObjectURL(this.files[0]))
}
opts.callback()
}
})
}
});
js:
<script>
<!-- *名称:图片上传本地预览 -->
<!-- *作者:米芬 -->
<!-- *时间:2017年6月6日 -->
$(".u-fileInput").each(function(){
var $this = $(this);
$this.uploadPreview({imgObj:$this.next().find("img"), callback:uploadHandler});
//获取url设置img src成功后，回调，隐藏add-icon；显示图片
function uploadHandler() {
$this.next().show();
$this.prev().hide();
}
});
$(function(){
if($('.idImg').attr('src') == undefined){
console.log('图片没有src值');
}else{
$('.u-fileInput').attr("disabled",false);
$(".imgcontainer").click(function(){
// 判断ie内核
if($.browser.msie){
var imgSrc = $(this).get(0).filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src;
}else{
var imgSrc = $(this).find("img").attr("src");
console.log($(this).find("img").attr("src"));
}
$(".big_ime_one,.big_ime_make_one").show();
$("#big_img").prop("src",imgSrc);
})
}
// <!-- 关闭 - ->
$(".big_ime_make_one").click(function(){
$(".big_ime_one,.big_ime_make_one").hide();
})
});
</script>
贴上效果图: