前端文件上傳的相關知識

一、為什麼需要文件上傳功能

1、隨著互聯網應用的不斷增加，前端上傳文件功能變得越來越常見。比如：用戶上傳頭像、上傳文件、上傳圖片等都需要前端文件上傳功能的支持。

2、前端文件上傳功能也是提高應用體驗的一個重要手段，可以使用戶方便快捷地上傳自己想要分享的文件，節省用戶時間。

3、同時，前端文件上傳功能也為開發者提供了更多的創意空間，如通過web端文件上傳實現實時數據的展示、動態修改文件等功能。

二、前端文件上傳方式

1、form表單上傳方式

<form action="server/upload.php" enctype="multipart/form-data" method="POST">
  <input type="file" name="file">
  <input type="submit" value="上傳">
</form>

使用form表單上傳功能時，需要設置enctype屬性值為”multipart/form-data”，同時將表單數據設置為POST請求方式。form表單並不需要額外的JavaScript操作，但是對於大文件上傳用戶上傳等場景並不友好。

2、XMLHttpRequest上傳方式

var fileObj = document.getElementById("file").files[0]; 
var xhr = new XMLHttpRequest();　　　　　　　　　　　　　　　　　　
var form = new FormData();　　　　　　　　　　　　　　　　　　　　　
form.append("file", fileObj);//添加file到表單
xhr.open("post", "/upload", true);　　　　　　　　　　　　　　　　　　　　
xhr.onload = function(){
  console.log("上傳成功");
}
xhr.send(form);//發送文件

使用XMLHttpRequest上傳文件可以通過JavaScript實現進度條的功能，同時利用FormData類和Blob對象將文件作為二進位數據傳送給後端伺服器。

三、前端文件上傳的限制

1、文件大小限制

可以通過設置input[type=”file”]的accept、capture、multiple屬性限制文件的大小，但是IE瀏覽器並不支持這些屬性，因此需要通過JavaScript判斷文件大小並給出提示，同時後端伺服器也需要做相應的文件上傳大小限制，防止惡意上傳。

<input type="file" name="file" accept="image/gif, image/jpeg" capture="camera" multiple>
<script>
  var fileObj = document.getElementById("file").files[0];
  var fileSize = fileObj.size;
  if(fileSize > 10*1024*1024){//限制文件為10M以下
    alert("文件太大了");
  }
</script>

2、文件類型限制

同樣也可以通過input[type=”file”]的accept屬性和後端伺服器的文件類型判斷限制來限制文件格式，防止非法文件上傳，提高安全性。

<input type="file" name="file" accept=".jpg, .png, .gif">

四、前端文件上傳注意事項

1、如果上傳的文件較大，需要給予用戶上傳進度的反饋，可以通過調用XMLHttpRequest的progress函數來獲取上傳進度。

xhr.upload.onprogress = function(event){
  if(event.lengthComputable){
    var percentComplete = event.loaded / event.total * 100;
    console.log("上傳進度：" + percentComplete + "%")
  }
}

2、在上傳大文件時，客戶端應該將文件切分為多個小文件並分別上傳，提高上傳效率。

3、對於跨域的上傳請求，需要服務端設置允許CORS跨域請求，同時客戶端在發送請求前也要修改XHR的特定設置來使其支持跨域請求。

4、如果有需要，在文件上傳前可以對文件進行壓縮、加密等操作，提高上傳速度同時保障安全性。

五、總結

前端文件上傳是實現很多web應用的必要功能，雖然前端文件上傳看起來簡單，但是需要開發者理解上傳方式、限制等方方面面，才能實現高效安全的上傳操作。