翁百璋與大泡泡的奇幻旅程

因為 .Net5 的推出，正式宣佈了Blazor˙來臨，

相關的技術請參考微軟的技術文件，還有很多的文章，

我自己也會慢慢寫出來，

我這邊只解釋一下資料實作，

首先你必須要知道Blazor都是在前端運行，

直接給Code 

https://jsfiddle.net/j3uybk2j/5/

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

 $(document).ready(function() {
  if (window.File && window.FileList && window.FileReader) {
    $("#files").on("change", function(e) {
      var files = e.target.files,
        filesLength = files.length;
      for (var i = 0; i < filesLength; i++) {
        var f = files[i]
        var fileReader = new FileReader();
        fileReader.onload = (function(e) {
          var file = e.target;
          $("<span class=\"pip\">" +
            "<img class=\"imageThumb\" src=\"" + e.target.result + "\" title=\"" + file.name + "\"/>" +
            "<br/><span class=\"remove\">Remove image</span>" +
            "</span>").insertAfter("#files");
          $(".remove").click(function(){
            $(this).parent(".pip").remove();
          });
                    
        });
        fileReader.readAsDataURL(f);
      }
    });
  } else {
    alert("Your browser doesn't support to File API")
  }
});

這是小技巧,簡單來說就是懶, 一行幹掉省去還要去跑foreach 

最後效能調教的時候這都會是一些小細節

可以一次解決的就直接解決掉,

這個範例是SP, 當然要跟DBA合作很密切

不然這段是有點危險的.

當你存放在App_Code裡面的程式無法在其他的地方Using時

有個設定其實是應該要被預設的

但是後期的VS2017-VS2019似乎已經解決這個問題

我是再VS2015遇到的,

不用懷疑, 有些專案換了VS版本就是不行了,

這問題很簡單, 我們開發時要常常開啟F12來看看目前狀況, 

不要盲目地開發

觀測別人程式碼常常都會看到在載入一些資源時為什麼後會都會帶一些怪怪的亂數字串

主要就是讓Server不會去Cache

以下就是解法,  Server會重新去取檔案,

我被同事問過很多次，當然我也因為這種問題困擾過，

這只是一個小觀念

問題就是有沒有辦法做到 List<List<string>>

簡單來說就是一對字串的集合的集合，

我遇過好幾是同事都卡在這邊，

其實解法真的很簡單，就是一念之間

這一題研究很難，網路上的文章比較雜亂，我自己是看了很多不斷嘗試才成功，

當我講解給同事聽時，同事說，怎麼這麼簡單，我說，因為我消化過了．XD

廢話不多說．馬上開始

    [AttributeUsage(AttributeTargets.Class | AttributeTargets.Method, AllowMultiple = true, Inherited = true)]

現在已經是2020了，Net 5也推出了，

但是不可以避免的事，有時候還是得串接一些third party系統的XML Web Service，

我們當然可以用以前的方式直接使用Web參考的方式來呼叫取回ＸＭＬ，

但是常常第三方只會先提供接口，帳號密碼都是暫時的，網址還會更換，

雖然有CI/CD，但是我們總不會希望把帳號密碼跟連結的URI放在程式碼內，

繼前一篇　[JavaScript]如何在mp3檔案上傳到後端Server前,由前端獲取相關檔案資訊　　

現在我們聊到上傳Wave的問題，線上音樂現在有標榜上傳48KHz/24bit，

這樣是高品質音樂，高聆聽享受，

而現在唱片製作最少也都是這樣的格式以上，

至於說要用多高規的格式，是不是就是好事，這不再這篇文章的討論範圍，

雖然現在網速都很快，上傳檔案總是需要一點時間，上傳一首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等等
  
});

如此, 在client端就可以得知道相關的資訊, 當然方式不只有這一種,