前端無法像原生APP一樣直接操作本地文件，否則的話打開個網頁就能把用戶電腦上的文件偷光了，所以需要通過用戶觸發，用戶可通過以下三種方式操作觸發：
- 通過input type="file" 選擇本地文件
- 通過拖拽的方式把文件拖過來
- 在編輯框裏面複製粘貼
第一種是最常用的手段，通常還會自定義一個按鈕，然後蓋在它上面，因爲type="file"的input不好改變樣式。如下代碼寫一個選擇控件，並放在form裏面：
<form> <input type="file" id="file-input" name="fileContent"> </form>
然後就可以用FormData獲取整個表單的內容：
$("#file-input").on("change", function() { console.log(`file name is ${this.value}`); let formData = new FormData(this.form); formData.append("fileName", this.value); console.log(formData); });
把input的value和formData打印出來是這樣的：
可以看到文件的路徑是一個假的路徑，也就是說在瀏覽器無法獲取到文件的真實存放位置。同時FormData打印出來是一個空的Objet，但並不是說它的內容是空的，只是它對前端開發人員是透明的，無法查看、修改、刪除裏面的內容，只能append添加字段。
FormData無法得到文件的內容，而使用FileReader可以讀取整個文件的內容。用戶選擇文件之後，input.files就可以得到用戶選中的文件，如下代碼：
$("#file-input").on("change", function() { let fileReader = new FileReader(); fileReader.onload = function() { if (/^image/.test(this.type)) { // 讀取結果在fileReader.result裏面 $(`<img src="${this.result}">`).appendTo("body"); } } // 打印原始File對象 console.log(this.files[0]); // base64方式讀取 fileReader.readAsDataURL(this.files[0]); });
把原始的File對象打印出來是這樣的：
它是一個window.File的實例，包含了文件的修改時間、文件名、文件的大小、文件的mime類型等。如果需要限制上傳文件的大小就可以通過判斷size屬性有沒有超，單位是字節，而要判斷是否爲圖片文件就可以通過type類型是否以image開頭。通過判斷文件名的後綴可能會不準，而通過這種判斷會比較準。上面的代碼使用了一個正則判斷，如果是一張圖片的話就把它賦值給img的src，並添加到dom裏面，但其實這段代碼有點問題，就是web不是所有的圖片都能通過img標籤展示出來，通常是jpg/png/gif這三種，所以你應該需要再判斷一下圖片格式，如可以把判斷改成：
/^image\/[jpeg|png|gif]/.test(this.type)
然後實例化一個FileReader，調它的readAsDataURL並把File對象傳給它，監聽它的onload事件，load完讀取的結果就在它的result屬性裏了。它是一個base64格式的，可直接賦值給一個img的src.
使用FileReader除了可讀取爲base64之外，還能讀取爲以下格式：
// 按base64的方式讀取，結果是base64，任何文件都可轉成base64的形式 fileReader.readAsDataURL(this.files[0]); // 以二進制字符串方式讀取，結果是二進制內容的utf-8形式，已被廢棄了 fileReader.readAsBinaryString(this.files[0]); // 以原始二進制方式讀取，讀取結果可直接轉成整數數組 fileReader.readAsArrayBuffer(this.files[0]);
其它的主要是能讀取爲ArrayBuffer，它是一個原始二進制格式的結果。把ArrayBuffer打印出來是這樣的：
可以看到，它對前端開發人員也是透明的，不能夠直接讀取裏面的內容，但可以通過ArrayBuffer.length得到長度，還能轉成整型數組，就能知道文件的原始二進制內容了：
let buffer = this.result; // 依次每字節8位讀取，放到一個整數數組 let view = new Uint8Array(buffer); console.log(view);
如果是通過第二種拖拽的方式，應該怎麼讀取文件呢？如下html（樣式略）：
<div class="img-container"> drop your image here </div>
這將在頁面顯示一個框：
然後監聽它的拖拽事件：
$(".img-container").on("dragover", function (event) { event.preventDefault(); }) .on("drop", function(event) { event.preventDefault(); // 數據在event的dataTransfer對象裏 let file = event.originalEvent.dataTransfer.files[0]; // 然後就可以使用FileReader進行操作 fileReader.readAsDataURL(file); // 或者是添加到一個FormData let formData = new FormData(); formData.append("fileContent", file); })
數據在drop事件的event.dataTransfer.files裏面，拿到這個File對象之後就可以和輸入框進行一樣的操作了，即使用FileReader讀取，或者是新建一個空的formData，然後把它append到formData裏面。
第三種粘貼的方式，通常是在一個編輯框裏操作，如把div的contenteditable設置爲true：
<div contenteditable="true"> hello, paste your image here </div>
粘貼的數據是在event.clipboardData.files裏面：
$("#editor").on("paste", function(event) { let file = event.originalEvent.clipboardData.files[0]; });
