纯前端文件上传汇总

最新推荐文章于 2024-05-08 23:39:58 发布

crary,记忆

最新推荐文章于 2024-05-08 23:39:58 发布

阅读量408

点赞数 10

分类专栏：文件上传前端知识总结文章标签：前端 javascript css html

本文链接：https://blog.csdn.net/qq_44327851/article/details/135223435

版权

前端知识总结同时被 2 个专栏收录

64 篇文章 1 订阅

订阅专栏

文件上传

1 篇文章 0 订阅

订阅专栏

前情提示：

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

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

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>

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

crary,记忆

关注

10
点赞
踩
11

收藏

觉得还不错? 一键收藏
0
评论
纯前端文件上传汇总

由于安全原因，当在浏览器中运行的时候，我们是无法直接上传文件到服务器的。所以我们只能使用一些模拟的方法来演示文件上传的效果。最后一句：在实际项目中，文件上传的逻辑是要与服务器端进行交互的，才能实现真正的文件上传功能。以下是汇总的三种方法可以用来模拟文件上传的效果，并且代码可以在浏览器中直接运行。
复制链接

扫一扫