JavaScript - 上传文件

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

• 使用 FormData 和 fetch 或 $.ajax

• 使用 XMLHttpRequest

• 使用插件简化上传

我们将在下一节详细讨论上述方法。

使用 FormData 和 Fetch 或 $.ajax

FormData 对象可用于创建键值对集合，这些集合可以通过网络查询(如 get 或 $.ajax)进行传输。 FormData 无需 HTML 表单即可上传文件，因此非常灵活，适用于多种应用。

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

// 将文件附加到 FormData 对象
formData.append('pictureFile', pictureInput.files[0]);

// 使用 $.ajax 发送文件
$.ajax({
    // 上传服务器的 URL
    url: 'upload.php',
    type: 'POST',
    // 文件上传必需
    processData: false,
    contentType: false,
    // 预期响应格式
    dataType: 'json',
    // 包含文件的 FormData
   	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 请求体发送。这种更"手动"的技术可以让你更好地控制。

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

form.onsubmit = function () {
    var formData = new FormData(form);
    // 将文件附加到 FormData
    formData.append('file', file);
    var xhr = new XMLHttpRequest();
    
    // 设置请求
    xhr.open('POST', form.getAttribute('action'), true);
    
    // 将 formData 与文件一起发送
    xhr.send(formData);
    
    // 阻止实际的表单提交
   return false;
}

输出

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

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

如果出现问题(例如，文件类型无效或文件大小非常大)，服务器将响应以下内容:-

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

使用 Simple Upload 插件

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('上传成功');
            },
            // 可选的错误处理函数
            error: function (error) {      
               alert('上传失败，请重试。');
         }
      });
   });
   </script>
</body>
</html>

输出

成功时页面将显示 -

上传成功

失败时页面将显示 -

上传失败，请重试。

总结

以上每种方法都提供了一种独特的无需表单即可上传文件的方式。使用 $.ajax 或 fetch 的 FormData 易于使用，并且兼容现代 JavaScript。XMLHTTPRequest 提供了更多控制权，但需要更多设置。只需 jQuery 和插件，SimpleUpload 插件即可轻松使用。由于每种方法都可以在多种情况下使用，因此您可以选择最适合您项目需求的方法。