纯前端 文件上传汇总

2023-12-30 14:30:08

前情提示：

????????由于安全原因，当在浏览器中运行的时候，我们是无法直接上传文件到服务器的。所以我们只能使用一些模拟的方法来演示文件上传的效果。

????????以下是汇总的三种方法可以用来模拟文件上传的效果，并且代码可以在浏览器中直接运行。

1. 使用<input type="file">标签：

<!DOCTYPE html>
<html>
<head>
? <title>File Upload Example1</title>
</head>
<body>
? <form action="/upload" method="post" enctype="multipart/form-data">
? ? <input type="file" name="file">
? ? <input type="submit" value="Upload">
? </form>
</body>
</html>

2.使用JavaScript和FormData对象：

<!DOCTYPE html>
<html>
<head>
  <title>File Upload Example</title>
</head>
<body>
  <input type="file" id="fileInput">
  <button onclick="uploadFile()">Upload</button>

  <script>
    function uploadFile() {
      var fileInput = document.getElementById('fileInput');
      var file = new Blob(['This is a dummy file'], { type: 'text/plain' });
      var formData = new FormData();
      formData.append('file', file, 'dummy.txt');

      fetch('/upload', {
        method: 'POST',
        body: formData
      })
      .then(response => {
        // 处理上传成功的逻辑
      })
      .catch(error => {
        // 处理上传失败的逻辑
      });
    }
  </script>
</body>
</html>

3.使用拖放功能：

<!DOCTYPE html>
<html>
<head>
  <title>File Upload Example</title>
  <style>
    #dropArea {
      width: 200px;
      height: 200px;
      border: 2px dashed #ccc;
      text-align: center;
      line-height: 200px;
    }
    #dropArea.dragover {
      background-color: #f0f0f0;
    }
  </style>
</head>
<body>
  <div id="dropArea">
    <p>Drag and drop files here</p>
  </div>

  <script>
    var dropArea = document.getElementById('dropArea');
    dropArea.addEventListener('dragover', function(e) {
      e.preventDefault();
      dropArea.classList.add('dragover');
    });
    dropArea.addEventListener('dragleave', function(e) {
      dropArea.classList.remove('dragover');
    });
    dropArea.addEventListener('drop', function(e) {
      e.preventDefault();
      dropArea.classList.remove('dragover');
      var file = new Blob(['This is a dummy file'], { type: 'text/plain' });
      // 处理上传文件的逻辑
    });
  </script>
</body>
</html>

? ? ? ? 最后一句：在实际项目中，文件上传的逻辑是要与服务器端进行交互的，才能实现真正的文件上传功能。

文章来源:https://blog.csdn.net/qq_44327851/article/details/135223435
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。