JavaScript实现文件上传demo？

2023 年 07 月 16 日

262 次浏览

1182字数

下面是一个简单的JavaScript文件上传的示例代码：

<!DOCTYPE html>
<html>
<head>
  <title>文件上传示例</title>
</head>
<body>
  <input type="file" id="fileInput">
  <button onclick="uploadFile()">上传</button>
  <script>
    function uploadFile() {
      var fileInput = document.getElementById('fileInput');
      var file = fileInput.files[0];
      if (file) {
        var formData = new FormData();
        formData.append('file', file);

        var xhr = new XMLHttpRequest();
        xhr.open('POST', '/upload', true);
        xhr.onload = function() {
          if (xhr.status === 200) {
            alert('文件上传成功');
          } else {
            alert('文件上传失败');
          }
        };
        xhr.send(formData);
      } else {
        alert('请选择要上传的文件');
      }
    }
  </script>
</body>
</html>

这个示例代码包含一个文件选择框和一个上传按钮。当用户选择文件并点击上传按钮时，JavaScript代码会通过XMLHttpRequest对象创建一个POST请求，将文件以FormData的形式发送到服务器上的"/upload"接口。

在服务器端，你需要相应的后端代码来处理文件上传请求。具体的实现方式取决于你使用的后端语言和框架。通常情况下，你可以在后端代码中使用相应的框架提供的文件上传功能来处理这个请求。