上傳文件的預覽及基本文件信息的獲取

這是第二次寫東西，寫了上一篇隨筆后，就好像有了第一筆存款，心里美美的，哈哈哈。

這段時間做的需求都是跟上傳有關的，比如上傳圖片呀（各種尺寸，各種裁剪，各種要求），視頻(選擇文件后先在頁面預覽，然后才上傳)，音頻，pdf，ppt，做一下總結。

本文的上傳都是通過input type="file"標簽實現的上傳。

一、上傳前的預覽

上傳圖片（視頻音頻）時，還沒有調接口保存入庫，需要本地預覽一下圖片（音視頻）的效果。

寶寶知道的方法有兩種：

1.將文件轉換成base64編碼的東東，然后插入src屬性中。

$('input[type="file"]').on('change', function() {
  var file = this.files[0];
  var reader = new FileReader();
  reader.readAsDataURL(file); //讀取此文件的File對象
  reader.onload = function(e) {
    e.target.result//result屬性將包含一個data:URL格式的字符串（base64編碼），以表示所讀取問加你的內容，圖片音視頻直接插入相應標簽的src屬性中便可實現預覽啦
  }
});

2.URL.createObjectURL()方法會根據傳入的參數創建一個指向改參數對象的URL。

URL.createObjectURL() 靜態方法會創建一個 DOMString，其中包含一個表示參數中給出的對象的URL。這個 URL 的生命周期和創建它的窗口中的 document 綁定。這個新的URL 對象表示指定的 File 對象或 Blob 對象。

這個url的生命僅存在於它被創建的這個文檔里。

語法：

objUrl = URL.createObjectURL();
URL(window.url || window.webkitURL ......)

然后將這個objUrl插入標簽的src屬性中即可

二、上傳圖片時獲取圖片的尺寸，大小，格式

1.文件的大小和格式在上傳時的file文件里都有的

$('input[type="file"]').on('change', function() {
  var file = this.files[0];
  console.log(file);
  if (file.size > 1024 * 1024 * 2) {//這里的size是byte為單位的哦
    console.log("文件大小不能超過2M哦~");
    return false;
  }
  if (file.type != 'image/png') {
    console.log("僅支持png格式的圖片哦~");
    return false;
  }
}）；

感覺快把學校學的基礎知識忘光了，當時換算大小的時候寫錯了，差評！！！臉紅地補充一下

字 word 
字節 byte 
位 bit 
字長是指字的長度

1字=2字節(1 word = 2 byte) （這里不一定哦）
1字節=8位(1 byte = 8bit)

1 Byte = 8 Bits

1 KB = 1024 Bytes

1 MB = 1024 KB

1 GB = 1024 MB

1PB（Petabyte 千萬億字節 拍字節）=1024TB，
1EB（Exabyte 百億億字節 艾字節）=1024PB，
1ZB (Zettabyte 十萬億億字節 澤字節)= 1024 EB,
1YB (Jottabyte 一億億億字節 堯字節)= 1024 ZB,
1BB (Brontobyte 一千億億億字節)= 1024 YB.

2.文件的尺寸 

reader.readAsDataURL(file);
reader.onload = function(e) {
  var image = new Image();
  image.src = e.target.result;
  image.onload = function() {
    console.log(image.width);
    console.log(image.height);
  }
}

寫這篇文章被打斷了好幾次，哈哈哈，不想寫了

三、圖片裁剪

這個插件有個問題，裁剪完一次后再次選擇圖片裁剪，圖片一直是第一次選取的。解決辦法是每次傳入插件的dom都需要新建。

就先這樣吧。