工作笔记——上传图片

html结构

<div class="col-xs-12" id="product_image">
              <div class="base-img-box">
                  
              </div>
              <div class="img-box">
                  <div class="add-img">
                       +
                  </div>
                  <input type="hidden" name="imgLen">
                  <input type="file" name="file"  class="img-input" id="img-input1"/>    
              </div>
         </div> 

 

js

function UploadImg(context,fileInput){
        var that = this;
            that.context = context;
            that.fileInput = fileInput;
            that.init();
       };
       UploadImg.prototype = {

            init:function(){
                var that = this;
                $(that.context).find('.add-img').click(function(){
                    $(that.context).find(that.fileInput).eq(0).trigger('click');                            
                })

                that.readFile();
                that.reviewImg();
            },
            readFile:function(){
                var that = this;
                var fileInput =$(that.context).find(that.fileInput)[0];
                $(fileInput).on('change',function(){
                    that.showFile();
               })

            },
            showFile:function(){
                var that = this;
                var thisInput = $(that.context).find(that.fileInput)[0];
                var file = thisInput.files[0];
                if(!/image\/\w+/.test(file.type)){
                    alert('请上传图片');
                    return false;
                }
                var reader = new FileReader();
                    reader.readAsDataURL(file);
                    reader.onload = function(){                                                       
                        var str = '<div class="img-box font-none"><img src="'+this.result+'" width="150" height="150"></img><input name="" type="hidden"  value="'+this.result+'"><i class="remove-img">X</i></div>';
                            $(that.context).find('.base-img-box').append(str);                                        
                            that.removeImg();
                            that.renameInput();
                                                           
                    }
            },
            removeImg:function(){
                var that = this;
                $(that.context).find('.base-img-box .remove-img').on('click',function(){                            
                    $(this).parents('.img-box').remove(); 
                    that.renameInput();                                                      
                })
            },
            renameInput:function(){
                var that = this;
                var inputLen =$(that.context).find('.base-img-box .img-box').length;
                    $(that.context).find('[name="imgLen"]').val($(that.context).find('.base-img-box .img-box').length); 
                    $.each($(that.context).find('.base-img-box .img-box'),function(i,item){
                        var index = i+1;
                        $(item).find('input').attr('name','file'+index);
                    })                                                           
            },
            reviewImg:function(){
            	var that = this;
            	var vl = $('.vl');
                var html = '';
                $.each(vl,function(index,item){
             	    html+='<div class="img-box font-none">';
                    html+= '<input type="hidden" name="" value="'+$(item).val()+'"/><img src="https://img-blog.csdnimg.cn/2022010614180790825.png'+$(item).val()+'" width="150" height="150"/>'
                    html+='<i class="remove-img">X</i></div>';
                })
                $('.base-img-box').append(html);
                that.renameInput();
                that.removeImg();
            }
       };


       new UploadImg('#product_image','#img-input1'); 

　　

 

css

/*上传图片*/
.img-box{
     float:left;
     position:relative;
     width:150px;
     height:150px;
     margin-right:15px;;
     line-height:150px;
     text-align:center;
     font-size:60px;
     font-weight:800;
     border:1px solid #e5e5e5;
     cursor:pointer;
     overflow:hidden;
     
}
.img-box.font-none{
    font-size:0;
}
.img-box img{
    width:150px;
    height:150px;
}
.img-input{
     display:none;
     visibility: hidden; 
     position: absolute;
}
.remove-img{
    position: absolute;
    display: block;
    width:30px;
    height:30px;
    top:10px;
    right:10px;
    font-size:20px;
    font-weight: 800;
    line-height: 30px;
    text-align: center;
    font-style: normal;
    color:#fff;
    background-color: rgba(154,7,7,.5);
    border-radius: 100%
}
.btn-xs{
	float:right;
}
/*结束 上传图片*/

效果图

 

自己写的比较简陋的demo，各位看官手下留情　　

转载于:https://www.cnblogs.com/MonaSong/p/5942285.html