一个图片上传插件推荐，支持多图上传和删除操作

本插件可以实现图片上传和图片删除操作，同时也可以限制上传图片张数，供大家参考和使用。

效果展示：

引入js:

<script type="text/javascript" src="localResizeIMG.js"></script>
<script type="text/javascript" src="mobileBUGFix.mini.js"></script>
html部分代码：
<div class="release_up_pic">     
  <div class="up_pic">
    <span id="chose_pic_btn" style="">
      <input type="file" accept="image/*" name="file" />
    </span> 
    <p class="maxpicture"><b>图片</b><br>(最多四张)</p>
  </div>
</div>

js处理代码：

<script>
// 多图
var picArr = new Array();// 存储图片
var picArrAll = new Array();
$('input[name="file"]:file').localResizeIMG({
  width:800,// 宽度
  quality: 0.8, // 压缩参数 1 不压缩 越小清晰度越低
  success: function (result) {
    $('.maxpicture').css('display','none')
    var img = new Image();
    img.src = result.base64;
    var _str = "<span class='pic_look' style='background-image: url("+ img.src + ")'><em id='delete_pic'>×</em></span>"
    $('#chose_pic_btn').before(_str);
    var _i = picArr.length
    picArr[_i] = result.base64;
    // picArr[_i] = _i;
    if(picArr.length==4){
      $('#chose_pic_btn').css('display','none')
    }
    // console.log(picArr)
    // console.log(picArrAll);
  }
});
// 删除
$(document).on('click', '#delete_pic', function(event) {
  var aa = $(this).parents(".pic_look").index();
  picArr.splice(aa,1);
  $(this).parents(".pic_look").remove();
  // console.log(picArr);
  if(picArr.length<4){
    $('#chose_pic_btn').css('display','block')
  }
}); 
</script>

css样式代码：

/*多图*/
.release_up_pic .tit{padding: 12px; font-size: 1.4rem; color: #999;}
.release_up_pic .tit h4{font-weight: normal;}
.release_up_pic .tit h4 em{font-size: 1.1rem;}
.release_up_pic .up_pic{background-color: #fff;}
.release_up_pic .up_pic .pic_look{width: 3.92rem; height: 3.92rem; display: inline-block; background-size: cover; background-position: center center; background-repeat: no-repeat; box-sizing: border-box; position: relative; margin-left: 0.2rem; border:1px solid #e8e8e8;}
.release_up_pic .up_pic .pic_look em{position: absolute; display: inline-block; width: 100%; height: 1.08rem; background-color: rgba(0,0,0,0.5); color: #fff; font-size: 18px; left: 0px; bottom: 0px; text-align: center; line-height: 1.08rem; font-weight: bold; font-style: normal;}
#chose_pic_btn{width: 4.0rem; height: 4rem; margin-left: 0.2rem; position: relative; display: inline-block; background-image: url(images/addUpload.jpg); box-sizing: border-box; background-size: 100% 100%; background-position: center center; background-repeat: no-repeat;}
#chose_pic_btn input{position: absolute; left: 0px; top: 0px; opacity: 0; width: 100%; height: 100%;}
.release_btn{padding: 0 24px; margin-top: 70px;}
.release_btn button{width: 100%; background-color: #2c87af; font-size: 1.4rem; color: #fff; border: none; border-radius: 3px; height: 45px; outline: none;}
.release_btn button.none_btn{background-color: #f2f2f2; color: #2c87af; border: 1px solid #2c87af; margin-top: 15px;}
.maxpicture{display: inline-block; font-size: 0.8rem; color: #999999; line-height: 1.2rem; text-align: center; padding-top: 0.6rem; margin-left: 0.6rem;}
.maxpicture b{color: #333333; line-height: 1.2rem; font-weight: normal;}

附件下载地址：阿里云盘链接：https://www.aliyundrive.com/s/FTmebryJ1AQ