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>
贴上效果图:
