運用js進行對圖片的壓縮上傳

1.html片段

<label class="font-size-normal mar-top20" ><div style="width: 4px;height: 25.4px;background-color: #ffc002; float: left;border-radius:4px;"></div> 圖片上傳</font></label>
			<input type="hidden" name="imgs" id="imgs" value="">	       
	        <input type="file" multiple="multiple"  id="multiple" /> 
			<div id="box"></div>
<input type="file" multiple="multiple"  id="multiple" /> 
<div id="box"></div>
 

1.js片段片段

<script>
  	var j = 1;
    // 多張
    $('#multiple').on('change', function (e) {
      var
        i = 0,
        files = e.target.files,
        len = files.length,
        notSupport = false;
      // 迴圈多張圖片，需要for迴圈和notSupport變數支援（檢測）
      for (; i < len; i++) {
        if (!notSupport) {
          (function(i) {
            new html5ImgCompress(files[i], {
              before: function(file) {
                console.log('多張: ' + i + ' 壓縮前...');
              },
              done: function (file, base64) { // 這裡是非同步回撥，done中i的順序不能保證
                console.log('多張: ' + i + ' 壓縮成功...');
               // insertImg(file, j);
                insertImg(base64, j++);
				upload(base64);
              },
              fail: function(file) {
                console.log('多張: ' + i + ' 壓縮失敗...');
              },
              complete: function(file) {
                console.log('多張: ' + i + ' 壓縮完成...');
              },
              notSupport: function(file) {
                notSupport = true;
                alert('瀏覽器不支援！');
              }
            });
          })(i);
        }
      }
    });

function upload(file){
	  $.ajax({
        type: 'POST',
        url: '/upload',
        data: {
          "base64": file,
        },
        dataType : "JSON",
        success: function(date) {
          $("#imgs").val($("#imgs").val() + date.badge + ","); 
        },
        error : function() {
			console.info('err');
		}
      });
}	
  // html中插入圖片
  function insertImg(file, j) {
    var
      img = new Image(),
      title, src, size, base;

    if (typeof file === 'object') {
    
    } else {
      title = '後';
      size = file.length;
      src = file;
      base = 1333;
    }

    if (!$('.box_' + j).length) {
      $('#box').prepend('<div class="box_' + j + '" />'); // 逆序，方便demo多次上傳預覽
    }

    img.onload = function() {
      $('.box_' + j).prepend(img).prepend('<p>圖片' + j + '，處理' + title + '</p><p>質量約：<span>' + (size / base).toFixed(2) + 'KB</span>' + '&nbsp;&nbsp;&nbsp;&nbsp;尺寸：<span>' + this.width + '*' + this.height + '</span></p>');
    };
    img.src = src;

    file = null; // 處理完後記得清快取
  };
</script>