图片上传本地预览插件

注意点:
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>

贴上效果图: