# 【前端小抄】原生JS讀取、寫出檔案
###### tags: `小抄` `JavaScript`
運用[File](https://developer.mozilla.org/en-US/docs/Web/API/File_API)、[FileList](https://developer.mozilla.org/en-US/docs/Web/API/FileList)和[FileReader](https://developer.mozilla.org/en-US/docs/Web/API/FileReader)三個Web API，我們可以透過網頁上的元素獲取使用者選取的檔案。
## 由<input>標籤獲得檔案
假設現在有這個很陽春的網頁：
```htmlembedded
<!DOCTYPE html>
<html>
<body>
<input id = "input" accept = ".xml" type = "file">讀我</input>
<p id = "result"></p>
</body>
</html>
```
因為使用者選取的檔案會被「儲存」在<input>元素中，所以我們要用FileList API存取這些檔案：
```javascript
const Input = document.getElementById('input'); // 選取id為input的HTML標籤
const File = Input.files[0]; // 使用者選取的第一個檔案
```
接著為了讓JavaScript真正「拆開」檔案，我們須借助FileReader API之力：
```javascript
function readFile(file) {
const fileHandler = new FileReader(); // 建構一個名叫fileHandler的FileReader物件
fileHandler.onload = (e) => { // 當檔案讀取完成時（即Load事件發生時）執行
document.getElementById('result').innerHTML = fileHandler.result;
// 顯示檔案
}
fileHandler.readAsText(file,'utf-8'); // 將檔案以UTF-8編碼開啟
}
readFile(File); // 讀取剛接收的檔案
```
## 由Drop事件獲得檔案
Drop事件以及它的兄弟姊妹（Drag、DragEnd、DragEnter、DragLeave、DragOver、DragStart）可以由[HTML Drag and Drop API](https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API)和[DataTransfer API](https://developer.mozilla.org/en-US/docs/Web/API/DataTransfer)存取，因此我們把網頁改成這樣：
```htmlembedded
<!DOCTYPE html>
<html>
<body>
<div id = "input" ondrop = "readDroppedFile(event);">丟進來</div>
<p id = "result"></p>
</body>
</html>
```
首先，我們需要先阻止瀏覽器嘗試開啟檔案（你現在可以嘗試拖曳PDF文件到瀏覽器中，瀏覽器預設會將其開啟），所以要加上這段程式碼：
```javascript
function readDroppedFile(e) {
e.preventDefault(); // 防止檔案被瀏覽器開啟
}
```
接著運用DataTransfer API，將程式改寫成這樣：
```javascript
function readDroppedFile(e) {
e.preventDefault(); // 防止檔案被瀏覽器開啟
const dt = e.dataTransfer(); // 建構一個名叫dt的dataTransfer物件
const File = dt.files[0]; // 使用者選取的第一個檔案
readfile(File); // 檔案已經可以餵給前面寫的readFile函數了！
}
```
## 完整小抄
由<input>元素獲得檔案：
```javascript=
function readFile(file) {
const Input = document.getElementById('input');
const File = Input.files[0];
const fileHandler = new FileReader();
fileHandler.onload = (e) => {
return fileHandler.result;
}
fileHandler.readAsText(file,'utf-8');
}
readFile(File);
```
由Drop事件獲得檔案：
```javascript=
function readDroppedFile(e) {
e.preventDefault();
const dt = e.dataTransfer();
const File = dt.files[0];
const fileHandler = new FileReader();
fileHandler.onload = (e) => {
return fileHandler.result;
}
fileHandler.readAsText(file,'utf-8');
}
readDroppedFile(event);
```
## 其他補充
Sign in via Google
Sign in via Facebook
Sign in via X(Twitter)
Sign in via GitHub
Sign in via Dropbox
Sign in with Wallet
Connect another wallet