What is the best way to upload files in a modern browser

在现代浏览器中上传文件，最推荐的方式是使用 XMLHttpRequest 或者 Fetch API 结合 FormData 对象。这种方法不仅支持异步上传，而且可以处理大文件和发送额外的数据，同时还可以实现上传进度的反馈。

示例说明：

使用 FormData 和 XMLHttpRequest：

1. FormData: 首先，我们通过 FormData 对象来构建要上传的数据。FormData 允许我们以键值对的形式添加文件和其他数据，这对于处理表单数据特别方便。

   javascript
   var formData = new FormData();
   formData.append("file", fileInput.files[0]);
   formData.append("user_id", "12345");

2. XMLHttpRequest: 然后，我们使用 XMLHttpRequest 来发送一个异步请求。在这个请求中，我们可以监听上传进度事件，这对于给用户反馈进度非常有用。

   javascript
   var xhr = new XMLHttpRequest();
   
   // 监听上传进度事件
   xhr.upload.onprogress = function(e) {
       if (e.lengthComputable) {
           var percentComplete = (e.loaded / e.total) * 100;
           console.log("上传进度: " + percentComplete.toFixed(2) + "%");
       }
   };
   
   xhr.open("POST", "upload_url");
   xhr.send(formData);

使用 Fetch API：

Fetch API 提供了一个更现代化的方式来处理网络请求，包括文件上传。

1. 构建 FormData:

   如前所述，我们首先构建一个 FormData 对象。

2. 使用 Fetch 发送数据:

   javascript
   fetch('upload_url', {
       method: 'POST',
       body: formData
   })
   .then(response => response.json())
   .then(result => {
       console.log('Success:', result);
   })
   .catch(error => {
       console.error('Error:', error);
   });

优势：

• 异步处理: 两种方法都支持异步上传，用户可以在上传文件的同时继续进行其他操作。
• 进度反馈: 通过监听进度事件，可以向用户提供详细的上传进度。
• 现代浏览器兼容性: XMLHttpRequest 和 Fetch API 都被现代浏览器广泛支持。

这些方法不仅提高了用户体验，还加强了前端功能的灵活性和强大性。