js 实现 input type="file" 文件上传示例代码

js 实现 input type=”file” 文件上传示例代码

2023年5月27日上午9:08 • JavaScript

下面是完整的“js 实现 input type="file" 文件上传示例代码”的攻略。

1. input type="file" 介绍

<input type="file"> 用于在 Web 页面中选择文件上传。

这个元素通常与表单一起使用，以便将其数据提交给服务器。当一个表单包含文件上传控件时，表单的编码类型必须是 multipart/form-data，而且就算 form 没有提交，用户也可以使用该元素来选取本地计算机上的一个文件。

2. 实现 input type="file" 文件上传

2.1 html 代码

<form action="http://example.com/upload.php" method="post" enctype="multipart/form-data">
  <input type="file" name="file">
  <button type="submit">上传</button>
</form>

<input type="file" name="file"> 表示一个文件上传控件，name 属性指定上传文件的参数名。

2.2 基本上传示例

<!DOCTYPE html>
<html>
  <head>
    <title>文件上传示例</title>
  </head>
  <body>
    <form action="http://example.com/upload.php" method="post" enctype="multipart/form-data">
      选择文件: <input type="file" name="file"><br/><br/>
      <input type="submit" value="上传">
    </form>
  </body>
</html>

在这个示例中，我们创建了一个表单，该表单包含一个 input type="file" 输入框和一个提交按钮，当用户选择文件并点击提交按钮时，表单的数据被发送到指定的 URL。

2.3 使用 AJAX 实现异步上传

我们可以使用 AJAX 技术实现异步上传，避免页面刷新和重新加载。

<!DOCTYPE html>
<html>
  <head>
    <title>AJAX 文件上传示例</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script>
      $(function () {
        $('button[type="submit"]').click(function(e) {
          e.preventDefault();
          var formData = new FormData();
          formData.append('file', $('input[type=file]')[0].files[0]);
          $.ajax({
            url: 'http://example.com/upload.php',
            type: 'POST',
            data: formData,
            processData: false,
            contentType: false,
            success: function(data) {
              alert('上传成功！');
            }
          });
        });
      });
    </script>
  </head>
  <body>
    <form>
      选择文件: <input type="file" name="file"><br/><br/>
      <button type="submit">上传</button>
    </form>
  </body>
</html>

在这个示例中，我们监听表单的 submit 事件，并把 input type="file" 的输入框添加到 FormData 对象中，然后使用 AJAX 发送数据到指定的 URL。在成功响应时，弹出上传成功的提示。

总结

本文介绍了如何使用 input type="file" 实现文件上传，同时还讲解了如何使用 AJAX 技术实现异步上传。实际上，这只是文件上传的一个基本示例，真正的文件上传应该考虑到安全性，对上传的文件类型、大小、数量等进行限制和验证。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：js 实现 input type=”file” 文件上传示例代码 - Python技术站