[JavaScript]如何在mp3檔案上傳到後端Server前,由前端獲取相關檔案資訊－翁百璋與大泡泡的奇幻旅程

雖然現在網速都很快，上傳檔案總是需要一點時間，上傳一首mp3到後端似乎也不用幾秒，

假設今天有個狀況，我們必須要限制mp3的檔案大小, kbps, 時間長短，

上傳到後端來判斷這個太簡單了，一大堆套件可以使用，範例程式一大堆，



但是請注意，你還是得花個幾秒鐘等上傳再來回報，

如果我們可以在前端使用HTML5以及使用瀏覽器的localstorage

讓這項工作在瞬間（我的爛電腦體驗大概幾十毫秒吧）就完成了，節省下來的可是很多資源呢!!

先HTML部分準備一個上傳檔案的input元件再準備一個audio元件


<p>上傳 .mp3 檔案</p>

<input type="file" id="file" />

<audio id="audio"></audio>

 

接下來就是JavaScript部分，先綁定file的change事件


$("#file").change(function(e) {

    var file = e.currentTarget.files[0]; //取得檔案物件

    $("#filename").text(file.name); //file.name檔名
    $("#filetype").text(file.type); //file.type檔案型態, 正確應該是　audio/mp3
    $("#filesize").text(file.size); //file.size這裡是Bytes

    objectUrl = URL.createObjectURL(file);
    //這個不多做解釋, 黑暗大解說的很詳細了 http://blog.darkthread.net/post-2014-03-12-html5-object-url.aspx

    $("#audio").prop("src", objectUrl); //指定audio來源

});

這邊請注意一點，當檔名跟檔案型態與檔案大小，這前三項不符合我們的需求，就直接先擋掉，

就不要再去做createObjectURL這件事情，

接下來，

audio物件綁定 canplaythrough 事件, 如果選到的檔案是無法被撥放的，這個事件將不會被觸發，

$("#audio").on("canplaythrough", function(e){

    var seconds = e.currentTarget.duration;  //這邊得到總秒數

    var kbit=filesize/128;
	// filesize是剛剛取得的Bytes, 這邊要換算成kbit 所以bytes * 8 = bits, 然後再除以1024 = kbits
	
    var kbps= Math.ceil(Math.round(kbit/seconds)/16)*16; 
	//這邊要換算成kbps K bits per secoond, 這邊的算法是要取一個整數, 也許是128,160等等
  
});