526互联

用html实现本地文件的上传

发布时间 2023-12-15 11:51:13作者: Xproer-松鼠

实现本地文件的上传需要使用到HTML5中的File API和FormData对象。以下是一个简单的实现示例：


<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>文件上传</title>
</head>
<body>
  <form id="upload-form">
    <label for="file-input">选择文件：</label>
    <input type="file" id="file-input" name="file">
    <br>
    <button type="submit">上传文件</button>
  </form>
  
  <script>
    var form = document.getElementById('upload-form');
    form.addEventListener('submit', function(event) {
      event.preventDefault();  // 阻止表单默认提交
      
      var fileInput = document.getElementById('file-input');
      var file = fileInput.files[0];  // 获取文件对象
      
      var formData = new FormData();
      formData.append('file', file);  // 添加文件到formData对象
      
      var xhr = new XMLHttpRequest();
      xhr.open('POST', 'http://localhost:8080/upload');  // 发送POST请求到上传文件的后台接口
      xhr.send(formData);  // 发送表单数据
      
      xhr.onreadystatechange = function() {
        if (xhr.readyState === 4 && xhr.status === 200) {
          console.log('文件上传成功', xhr.responseText);
        }
      };
    });
  </script>
</body>
</html>

以上代码实现了一个简单的文件上传表单，它包含一个文件选择输入框和一个提交按钮。当用户选择了一个文件并点击了提交按钮，会使用AJAX方式将文件上传到指定的后台接口（这里的接口地址是http://localhost:8080/upload，你需要根据自己的需求修改）。

注意，在示例代码中，我们取消了表单的默认提交行为，使用AJAX发送请求。在表单中使用AJAX发送请求会更加简明且专业(expected)，而且还可以较容易地进行前端校验和数据处理。

 

参考文章：http://blog.ncmem.com/wordpress/2023/12/15/%e7%94%a8html%e5%ae%9e%e7%8e%b0%e6%9c%ac%e5%9c%b0%e6%96%87%e4%bb%b6%e7%9a%84%e4%b8%8a%e4%bc%a0/

欢迎入群一起讨论