js代码

<script>
  (function ($) {
    $.extend({
      //压缩图片，参数1：file对象，参数2：压缩比例
      compress(file,scale) {
        return new Promise(function (resolve,reject) {
          let _scale=scale || 1;
          let cvs = document.createElement('canvas');
          let ctx = cvs.getContext('2d');
          let img = new window.Image();
          let imgType=file.type;
          img.src = URL.createObjectURL(file);
          img.onload=function () {
            cvs.width = img.width*_scale;
            cvs.height = img.height*_scale;
            ctx.drawImage(img, 0, 0, cvs.width, cvs.height);
            resolve(cvs.toDataURL(imgType));
          }
        });
      }
    });
    $.fn.extend({

      //复制节点
      cloneNode(num){
        let p=this.parent();
        for (let i=0;i<num;i++){
          p.append(this.clone(true))
        }
      }
    });
    $(function () {
      $('li').cloneNode(6);//复制66个节点
      //点击触发input
      $('li').each(function (i) {
        $(this).click(function () {
          $('input').attr("name",'input_'+i).click();
        })
      });

      $("input").change(function () {
        let files=$(this)[0].files[0];//获取files对象
        let index=parseInt(($(this).attr('name')).split("_")[1]);
         //0.5为当前压缩比
        $.compress(files,0.5).then((url)=>{
          $('li').eq(index).css({"background-image": "url("+url+")"});
		  //上传到服务器
		  $.post('url',{base64:url},()=>{
			
		  })
        })
      })
    })
  })(jQuery)
</script>