笙亿网络策划

JavaScript 怎么上传文件？

约 8 分钟读完 31 阅
文章导读
Previous Quiz Next 我们都知道，在 Web 开发中有一个常见任务就是将文件上传到服务器。虽然使用表单提交文件是最常见的方法，但还有多种其他方法。本章我们将介绍以下三种主要方法 —
📋 目录
  1. Ⅰ 使用 FormData 结合 Fetch 或 $.ajax
  2. Ⅱ 使用 XMLHttpRequest
  3. Ⅲ 使用简单的上传插件
  4. Ⅳ 总结
A A

JavaScript - 上传文件

Previous
Quiz
Next

我们都知道，在 Web 开发中有一个常见任务就是将文件上传到服务器。虽然使用表单提交文件是最常见的方法，但还有多种其他方法。本章我们将介绍以下三种主要方法 —

  • 使用 FormData 结合 fetch 或 $.ajax

  • 使用 XMLHttpRequest

  • 使用插件简化上传

下面我们将详细讨论上述方法。

使用 FormData 结合 Fetch 或 $.ajax

FormData 对象可以用来创建键值对集合，并通过网络请求（如 get 或 $.ajax）传输。由于它允许在无需 HTML 表单的情况下上传文件，FormData 非常灵活，适用于多种应用场景。

/* 创建一个新的 FormData 对象 */
// Create a new FormData object
var formData = new FormData();

/* 将文件添加到 FormData 对象 */
// Append the file to the FormData object
formData.append('pictureFile', pictureInput.files[0]);

/* 使用 $.ajax 发送文件 */
// Use $.ajax to send the file
$.ajax({
   /* 上传到的服务器 URL */ 
   // URL of the server to upload to 
   url: 'upload.php',        
   type: 'POST',
   /* 文件上传必需 */ 
   // Necessary for file upload 
   processData: false,       
   contentType: false,
   /* 期望的响应格式 */
   // Expected response format
   dataType: 'json',         
   /* 包含文件的 FormData */
   // FormData containing the file
   data: formData            
});

输出

如果文件成功上传到服务器，服务器将返回一个包含详细信息（如以下所示）的 JSON 对象 — 

{
   "status": "success",
   "message": "File uploaded successfully.",
   "filePath": "uploads/picture.jpg"   
}

如果出现问题（例如文件太大或格式不正确），服务器可能会发送如下错误 JSON 对象 —

{
   "status": "error",
   "message": "File upload failed. Please try again."
}

使用 XMLHttpRequest

另一种无需表单即可上传文件的方法是使用 XMLHttpRequest。文件数据可以直接通过 POST 请求体发送。这种更“手动”的技术提供了更多的控制。

/* 获取表单元素 */
// Get the form element 
var form = document.getElementById('the-form');

form.onsubmit = function () {
   /* 创建 FormData */
   var formData = new FormData(form);
   /* 将文件添加到 FormData */
   // Append file to the FormData
   formData.append('file', file); 
   var xhr = new XMLHttpRequest();
   
   /* 设置请求 */
   // Set up request
   xhr.open('POST', form.getAttribute('action'), true);
   
   /* 发送包含文件的 formData */
   // Send the formData with the file
   xhr.send(formData);
   
   /* 阻止实际的表单提交 */
   // Prevent actual form submission
   return false;
}

输出

如果上传成功处理，服务器可以回复如下内容 —

{
   "status": "success",
   "message": "File uploaded successfully.",
   "filePath": "/uploads/myfile.jpg" 
}

如果出现问题（例如，无效的文件类型或文件过大），服务器将响应如下 —

{
   "status": "error",
   "message": "File upload failed. Please try again."
}

使用简单的上传插件

simpleUpload 插件使用基于 jQuery 的方法，使得文件上传变得非常简单。该插件处理了所有设置工作，让您可以专注于上传行为和服务器端处理。

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>File Upload</title>
   <!-- Include jQuery -->
   <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
   <!-- Use simpleUpload plugin -->
   <script src="path/to/jquery.simpleUpload.js"></script>
</head>
<body>
   <h2>Upload a File</h2>

   <!-- File input field -->
   <input type="file" name="file" id="simpleUpload" multiple>
   <!-- Button to trigger upload -->
   <button type="button" id="upload">Upload</button>

   <script>
      // 处理文件上传的 JavaScript 代码
      $(document).ready(function() {
         $('#simpleUpload').simpleUpload({
            // 服务器端点
            url: 'upload.php',            
            trigger: '#upload',            
            
            // 成功处理函数
            success: function (data) {     
               alert('Successfully Uploaded');
            },
            // 可选的错误处理函数
            error: function (error) {      
               alert('Upload failed. Please try again.');
         }
      });
   });
   </script>
</body>
</html>

输出

成功时页面将显示 −

Successfully Uploaded

失败时页面将显示 −

Upload failed. Please try again.

总结

这些方法各自提供了无需表单即可上传文件的一种独特方式。使用 $.ajax 或 fetch 的 FormData 易于使用，并与现代 JavaScript 兼容。XMLHTTPRequest 提供了更多控制，但需要更多设置。只需 jQuery 和插件，SimpleUpload Plugin 就非常简单易用。由于每种方法都可在多种上下文中使用，您可以选择最适合项目需求的一种。