圖片上傳本地預覽外掛
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>
貼上效果圖:
