某工程師的開發日常

發表文章

目前顯示的是有「JavaScript」標籤的文章

reCAPTCHA v3 的簡單教學

Google於10/29正式發布reCAPTCHA v3 API，該版本中最大的亮點就是透過分析使用者瀏覽網站的行為，以辨識使用者是否為機器人。換句話說，使用者再也不用一直回答問題和不停地點選圖片，所以說以後再也不用聽到客戶抱怨老是點錯圖片，果然科技始於人性啊~ 另外reCAPTCHA v3 的使用方式也非常簡單，只要短短幾個步驟，就能輕鬆地將reCAPTCHA v3運用在專案中。 1. 首先，至 https://www.google.com/recaptcha/admin 替你的網站註冊一個reCAPTCHA。 2. 註冊後，將會得到Site Key和Secret Key，其中Site Key是給前端使用，而Secret Key則是給後端使用。 3. 在前端HTML head的部分加入reCAPTCHA的api.js。 <script src='https://www.google.com/recaptcha/api.js?render=6Lc5vHgUAAAAAKHxlH0FdDJdA2-8yfzpoMDLIWPc'></script> 4. 接著在body的部分呼叫reCAPTCHA API向Google取得token後，再將token送至後端進行驗證，範例如下: <script> grecaptcha.ready(function () { console.log('1. grecaptcha.ready'); console.log('2. grecaptcha.execute("6Lc5vHgUAAAAAKHxlH0FdDJdA2-8yfzpoMDLIWPc", { action: "@Url.Action("VerifyBot", "Account")" })'); grecaptcha.execute('6Lc5vHgUAAAAAKHxlH0FdDJdA2-8yfzpoMDLIWPc', { action: '@...

閱讀完整內容

JavaScript : How to copy properties of objects into another object ?

有時候我們可能會想要將某一個物件的屬性複製到另一個物件，所以我們可能會寫出像下面這樣的程式碼。 let order = { OrderID: 'A001', OrderDate: '2018-10-14' }; let items = [ { ItemName: '橡皮擦', Price: 15, Quantity: 10 }, { ItemName: '鉛筆', Price: 10, Quantity: 10 } ]; order.Items = items; // Output : // { // OrderID: 'A001', // Items: [ // { ItemName: '橡皮擦', Price: 15, Quantity: 10 }, // { ItemName: '鉛筆', Price: 10, Quantity: 10 } // ], // OrderDate: '2018-10-14' // } 如果我們有很多的屬性要做複製的話，向上面這樣的寫法實在太費時。事實上，我們可以使用Object.assign()來輕鬆地完成這件事，它用於複製一個或多個物件，將它們所有可列舉的屬性到另一個目標物件。 let order = { OrderID: 'A001', OrderDate: '2018-10-14' }; let items = [ { ItemName: '橡皮擦', Price: 15, Quantity: 10 }, { ItemName: '鉛筆', Price: 10, Quantity: 10 } ]; let customer = { CustomerID : 'C001' }; ...

閱讀完整內容

Upload large files to web api using resumable.js

最近工作剛好遇到大檔案(> 2GB)上傳的需求，大檔案的上傳方式與平常處裡小檔案上傳當方式有些不同，對於大檔案上傳我們需要額外考量三個問題 : 1. 上傳逾時。 2 IIS 不支援超過2BG 的檔案上傳 3. 檔案在上傳過程中中斷。上述這三個問題可以透過multipart/form-data和chuck 的方式，將檔案分割成無數個chunk，且給予每個chunk編號，如果傳送失敗就重新傳送chunk ，進而實現斷點續傳的功能。目前市面三個有支援大檔案與斷點續傳的JavaScript Library分別有 Resumable.js 、 Dropzone.js 、jQuery Ajax File Upload，且它們底層皆是使用HTML5 File API，此外它們的作者都有提供Server Side Implementation Sample，而且連TypeScript的定義檔都有，真的都是佛心來著。接著我們開始介紹如何使用Resumable.js 上傳檔案至Web API(.NET) : Server Side (Web API)的主要流程: 1. 首先，在Web API需要使用MultipartFormDataStreamProvider來取得每一次Resumable.js 所傳過來的chunk，而chunk由FormData和FileData組成，其中FormData記載Resumable.js所定義的chuck欄位，而FileData則存放chunk的檔案內容。 2. 接著從FormData得到這些Resumable.js所定義的chuck欄位resumableFilename、resumableIdentifier、resumableTotalChunks、resumableChunkNumber欄位，並且根據這些欄位我們將chunk儲存在Upload 目錄下。 3. 等待所有chunk都到位，將合併這些chunk並組成完整的檔案。 FileStorageController Class [RoutePrefix("api/FileStorage")] public class FileStorageController : ApiController { ...

閱讀完整內容

HTML5 : Object URL

在上一篇介紹HTML5 File API的文章中提到Data URI是一種文字型態的檔案格式，其格式為"data:<mime type>;base64,<data>"，範例:"data:image/png;base64,PCFET0NUWVB..." ，而Data URI 的好處就是它可以直接寫入 HTML，且img元素可以接受Data URI格式。這次的文章主要是介紹運用Object URL將檔案儲存在瀏覽器。過去我們往往都會透過後端的Web API 將檔案路徑傳送到前端link或img元素，以便讓使用者下載或瀏覽，但這有一些問題，像是縮圖殘留，這時就是必須自己去寫一段Code清理Cache。如今我們可以透過HTML5 Object URL將檔案儲存在瀏覽器，而且由於檔案物件的生命週期與網頁綁在一起，所以當網頁被關閉，這些檔案物件就會被釋放，因此我們自然可以不用去處理縮圖殘留的問題。事實上Object URL的儲存機制就是利用GUID向瀏覽器提取檔案物件，其而格式為"blob:<url>;<GUID>"，範例:"blob:https://www.myblogger.com/e75c76a2-138a-4b17-b9f6-029199e3985f" Object URL 程式碼範例如下所示: 1. 首先，在Input註冊Chang事件以便取得File。 2. 我們利用URL.createObjectURL去建立ObjectURL，以及取得ObjectURL String。 3. 最後，將得到的ObjectURL String丟到link 元素，此時我們可以透過download屬性指定下載時的檔案名稱。 ※ 如果想要使連結失效並且釋放檔案物件，可以呼叫URL.revokeObjectURL來註銷ObjectURL。 <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width" /> <title...

閱讀完整內容

HTML5 : File API

今天我們示範使用HTML5 File API來讀取檔案內容。雖然市面上有很多好用且功能又強大的File Uploader ，但是骨子裡還是用HTML5 File API，所以不妨多去了解一些HTML5的東西對於前端開發絕對是有益處的。 File API的幾個重要的核心類別 : Blob(Binary Large Object): 表示二進制資料，此外還可以設定MIME類型。 File: 表示檔案且繼承於Blob，但與Blob不同的是它增加name、lastModified、lastModifiedDate、webkitRelativePath等屬性。 FileList: 表示 files的集合。 FileReader: 以非同步的方式讀取檔案內容，以下幾種方法與事件 : 1. readAsArrayBuffer：讀取檔案後，並回傳 ArrayBuffer 物件。 2. readAsBinaryString：讀取檔案後，並回傳 Binary String 。 (非標準，建議不要使用) 3. readAsDataURL：讀取檔案後，並回傳 DataURI 。 4. readAsText：讀取檔案後，並傳回文字內容(預設UTF-8)。 5. onload : 讀取完檔案後，所執行的事件。 6. abort：取消讀取。 ※Data URI 是一種文字型態的檔案格式，其格式為"data:<mime type>;base64,<data>"，範例:"data:image/png;base64,PCFET0NUWVB..." ，而Data URI 的好處就是它可以直接寫入 HTML，且img元素可以接受Data URI格式。 ※若要以同步的方式讀取檔案請使用FileReaderSync File API 程式碼範例如下所示: 1. 首先，在Input註冊Chang事件以便取得File。 2. 建立FileReader物件，並且註冊onload事件用於接收回傳的DataURL。 3. 執行readAsDataURL來讀取File，讀取完檔案後會觸發onload事件。 <!DOCTYPE html> <head> <meta c...

閱讀完整內容