<input type="file" accept="image/*" name="upload" id="upload" multiple>
<input type="hidden" id="hiddenImgUrl" />  <!--設(shè)置這個(gè)隱藏域是為了便于存放上傳至服務(wù)器后返回的圖片地址-->

//圖片上傳
var file = {
  upload: function (e) {
    var self = this;
    var files = e.target.files;
    var type = files[0].type.split('/')[0];
    if (type != 'image') {
      alertMsg('請(qǐng)上傳圖片');
      return;
    }
    //var size = Math.floor(file.size / 1024 / 1024);
    //if (size > 3) {
    //  alert('圖片大小不得超過(guò)3M');
    //  return;
    //};
    for (var i = 0; i < files.length; i++) {
      var reader = new FileReader();
      reader.readAsDataURL(files[i]);
      reader.onloadstart = function () {
        //用以在上傳前加入一些事件或效果，如載入中...的動(dòng)畫效果
      };
      reader.onloadend = function (e) {
        var dataURL = this.result;
        var imaged = new Image();
        imaged.src = dataURL;
        imaged.onload = function () {  //利用canvas對(duì)圖片進(jìn)行壓縮
          var canvas = document.createElement('canvas');
          var ctx = canvas.getContext('2d');
          var w = 0;
          var h = 0;
          if (this.width > this.height) {
            h = 1000;
            var scale = this.width / this.height;
            h = h > this.height ? this.height : h;
            w = h * scale;
          }
          else {
            w = 1000;
            var scale = this.width / this.height;
            w = w > this.width ? this.width : w
            h = w / scale;
          }
          var anw = document.createAttribute("width");
          var anh = document.createAttribute("height");
          if (this.width > this.height) {
            anw.value = h;
            anh.value = w;
          }
          else {
            anw.value = w;
            anh.value = h;
          }
          canvas.setAttributeNode(anw);
          canvas.setAttributeNode(anh);
          if (this.width > this.height) {
            ctx.translate(h, 0);
            ctx.rotate(90 * Math.PI / 180)
            ctx.drawImage(this, 0, 0, w, h);
            ctx.restore();
          }
          else {
            ctx.drawImage(this, 0, 0, w, h);
          }
          dataURL = canvas.toDataURL('image/jpeg');
          //回調(diào)函數(shù)用以向數(shù)據(jù)庫(kù)提交數(shù)據(jù)
          self.callback(dataURL);
        };
      };
    }
  },
  event: function () {
    $("#upload").change(function (e) {      
      file.upload(e);
    });
  },
  callback: function (dataURL) {
    $.ajaxSettings.async = false;  //這里必須將ajax的異步改為同步才可以把返回并保存在隱藏域中的圖片地址取出同時(shí)加在地址欄中作為參數(shù)一并傳入下一個(gè)頁(yè)面，這樣做的目的是因?yàn)榉祷氐膱D片地址不是一個(gè)json數(shù)組，而是單個(gè)的json字符串，所以只能將返回的圖片地址json字符串拼接在一起作為參數(shù)傳到下一個(gè)頁(yè)面
    $.post(url, dataURL, function (res) {  //將base64圖片流的圖片通過(guò)后臺(tái)轉(zhuǎn)換成普通的圖片路徑并上傳至服務(wù)器
      var imgUrl = $("#hiddenImgUrl").val();
      if (res.success) {
        $(".loading").hide();
        if (imgUrl != "") {
          $("#hiddenImgUrl").val(imgUrl + "|" + res.imgUrl);  //中間加一個(gè) | 是為了到下一個(gè)頁(yè)面便于將傳過(guò)去的圖片地址參數(shù)轉(zhuǎn)換為數(shù)組
        } else {
          $("#hiddenImgUrl").val(res.imgUrl);
        }
        var imgUrl = $("#hiddenImgUrl").val();
        window.location.href = "apply.html?imgUrl=" + imgUrl;
      } else {
        alert(res.message);
      }
    }, "json");
  },
  init: function () {
    this.event();
  }
}
file.init();

event: function () {
    $("#upload").change(function (e) {
      $(".loading").show();     
      file.upload(e);
    });
  }

callback: function (dataURL) {    
    $.post(url, dataURL, function (res) {  //將base64圖片流的圖片通過(guò)后臺(tái)轉(zhuǎn)換成普通的圖片路徑并上傳至服務(wù)器
      if (res.success) {
        $(".loading").hide();
        var result = '<div class="result"><img src="'+res.imgUrl+'" alt=""/></div>';
        var div = document.createElement('div');
        div.innerHTML = result;
        document.body.appendChild(div);        
      } else {
        alert(res.message);
      }
    }, "json");
  }