上传单张图片插件

上传单张图片插件 

HTML

<div class="businessLicenseAdd_upImg">
 <div class="businessLicenseAdd_upImg_title">上传营业执照</div>
 <div class="businessLicenseAdd_upImg_cont">
  <input type="file" accept="image/*" id="head_img_change" class="businessLicenseAdd_upImg_cont_upimg" />
  <img src="默认上传图片" id="headimg" class="businessLicenseAdd_upImg_cont_img" />
 </div>
</div>

 

CSS

 .businessLicenseAdd_upImg{
     width: 100%;
     margin-top: 0.14rem;
     float: left;
     background-color: #fff;
     padding: 0 0.24rem 0.56rem;
}
 .businessLicenseAdd_upImg_title{
     width: 100%;
     height: 0.44rem;
     line-height: 0.44rem;
     float: left;
     overflow: hidden;
     margin-top: 0.26rem;
     font-size:0.32rem;
     color:rgba(51,51,51,1);
}
 .businessLicenseAdd_upImg_cont{
     width: 100%;
     margin-top: 0.2rem;
     float: left;
     position: relative;
     z-index: 1;
}
 .businessLicenseAdd_upImg_cont_upimg{
     opacity: 0;
     width: 3.04rem;
     height: 2.54rem;
     position: absolute;
     z-index: 1;
     top: 0;
     left: 0;
}
 .businessLicenseAdd_upImg_cont_img{
     width: 3.04rem;
     height: 2.54rem;
     float: left;
     overflow: hidden;
     border: #eee 1px solid;
}

JS

<!-- 上传图片 -->
<script type="text/javascript">
$(function(){

　　　　$("#head_img_change").change(function() {
　　　　　　var $file = $(this);
　　　　　　var fileObj = $file[0];
　　　　　　var windowURL = window.URL || window.webkitURL;
　　　　　　var dataURL;
　　　　　　var $img = $("#headimg");
　　　　　　if(fileObj && fileObj.files && fileObj.files[0]){
　　　　　　　　dataURL = windowURL.createObjectURL(fileObj.files[0]);
　　　　　　　　$img.attr('src',dataURL/*图片地址*/);
　　　　　　}else{
　　　　　　　　dataURL = $file.val();
　　　　　　　　var imgObj = document.getElementById("headimg");
　　　　　　　　// 1、在设置filter属性时，元素必须已经存在在DOM树中，动态创建的Node，也需要在设置属性前加入到DOM中，先设置属性再加入，无效；
　　　　　　　　// 2、src属性需要像下面的方式添加，上面的两种方式添加，无效；
　　　　　　　　imgObj.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)";
　　　　　　　　imgObj.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = dataURL;
　　　　　　}
　　　　});
　　})
</script>