JS中FormData类实现文件上传

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

当需要上传文件时，可以使用JS中的FormData类来实现。下面是实现文件上传的完整攻略：

创建一个表单

首先，要在HTML中创建一个表单，指定具体的上传文件的路径和上传方法：

<form action="upload.php" method="post" enctype="multipart/form-data">
   <input type="file" name="file" />
   <input type="submit" value="上传文件" />
</form>

获取文件并发送请求

使用JavaScript获取上传文件，并发送请求，这里使用Fetch API来发送POST请求

<script>
   function uploadFile() {
      var formData = new FormData();
      var fileField = document.querySelector("input[type='file']");

      formData.append("file", fileField.files[0]);

      fetch('upload.php', {
         method: 'POST',
         body: formData
      })
      .then(response => response.json())
      .then(data => {
         console.log(data);
      })
      .catch(error => {
         console.error(error)
      })
   }
</script>

在上例中，我们首先创建了一个FormData实例formData，接着获取了input元素的第一个文件，将其作为参数传递给append()方法，最后通过Fetch API来发送POST请求并处理响应结果。

服务器端代码

上传的文件必须在服务器端进行处理。因此，在你的服务器端代码中需要有上传文件的处理逻辑。

PHP处理上传文件的代码示例如下：

<?php
$target_dir = "uploads/";
$target_file = $target_dir . basename($_FILES["file"]["name"]);
$uploadOk = 1;
$imageFileType = strtolower(pathinfo($target_file,PATHINFO_EXTENSION));

// 检查文件大小
if ($_FILES["file"]["size"] > 500000) {
    echo "文件过大，请重新上传";
    $uploadOk = 0;
}

// 检查文件类型
if($imageFileType != "jpg" && $imageFileType != "png" && $imageFileType != "jpeg"
&& $imageFileType != "gif" ) {
    echo "只允许上传 jpg, jpeg, png 和 gif 文件";
    $uploadOk = 0;
}

// 检查文件是否存在，并移动到指定目录
if ($uploadOk == 0) {
    echo "上传失败";
} else {
    if (move_uploaded_file($_FILES["file"]["tmp_name"], $target_file)) {
        echo "文件成功上传到目录下：" . $target_file;
    } else {
        echo "上传失败";
    }
}
?>

在服务器端处理上传文件的逻辑中，我们检查了文件的大小和类型，并将上传的文件移动到指定目录下。如果上传文件成功，则返回文件上传成功信息，否则返回错误信息。

示例

下面是两个上传文件的示例。第一个示例将上传照片，并在上传成功后展示上传的照片。

<html>
   <body>
      <form action="upload_photo.php" method="post" enctype="multipart/form-data">
         <input type="file" name="file" id="file">
         <input type="submit" value="上传照片" onclick="uploadPhoto()">
      </form>
      <div id="photo"></div>
   </body>

   <script>
      function uploadPhoto() {
         var formData = new FormData();
         var fileField = document.querySelector("#file");

         formData.append("file", fileField.files[0]);

         fetch('upload_photo.php', {
            method: 'POST',
            body: formData
         })
         .then(response => response.json())
         .then(data => {
            console.log(data);
            let image = document.createElement('img');
            image.src = data.fileUrl;
            document.getElementById('photo').appendChild(image);
         })
         .catch(error => {
            console.error(error)
         })
      }
   </script>
</html>

第二个示例将上传音乐文件，并在上传成功后播放音乐文件。

<html>
   <body>
      <form action="upload_music.php" method="post" enctype="multipart/form-data">
         <input type="file" name="file" id="file">
         <input type="submit" value="上传音乐文件" onclick="uploadMusic()">
      </form>
      <audio id="musicPlayer" controls></audio>
   </body>

   <script>
      function uploadMusic() {
         var formData = new FormData();
         var fileField = document.querySelector("#file");

         formData.append("file", fileField.files[0]);

         fetch('upload_music.php', {
            method: 'POST',
            body: formData
         })
         .then(response => response.json())
         .then(data => {
            console.log(data);
            let musicPlayer = document.getElementById('musicPlayer');
            musicPlayer.src = data.fileUrl;
         })
         .catch(error => {
            console.error(error)
         })
      }
   </script>
</html>

在上传成功后，我们通过HTML5 Audio API来播放音乐文件。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：JS中FormData类实现文件上传 - Python技术站