Connect_logo_6.png 退出
前端视频教程 小程序 众筹源码 python 商城源码 商城模板 响应式模板 中文模板 手机模板 企业源码
充值

HTML5+jQuery图片上传压缩预览代码

作者/代码整理:  (转载请附加本文地址,带有“懒人原生”字样的谢绝转载) 发布日期:2018-06-05
一款强大的HTML5+jQuery图片上传压缩预览代码,上传图片并压缩显示。


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>