js HTML5上传示例代码完整版

关于“js HTML5上传示例代码完整版”的完整攻略，以下是我整理的内容：

一、前言

在讲如何使用“js HTML5上传示例代码完整版”之前，我们先来了解一下什么是HTML5文件上传。HTML5文件上传是一种现代化、快速、可靠的文件上传方式，与之前的Flash上传相比具有更高效的上传速度和更高的可靠性。

二、主要步骤

使用“js HTML5上传示例代码完整版”进行文件上传，主要分为以下几步：

创建上传表单

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>HTML5文件上传示例</title>
  </head>
  <body>
    <form action="upload.php" method="POST" enctype="multipart/form-data">
      <input type="file" name="file" id="file" />
      <input type="submit" value="上传" />
    </form>
  </body>
</html>

这里我们创建了一个简单的上传表单，包含一个文件选择框和一个提交按钮，需要注意的是，表单的enctype属性必须设置为multipart/form-data，否则无法上传文件。

编写前端上传代码

function uploadFile() {
  var file = document.getElementById("file").files[0];
  var xhr = new XMLHttpRequest();

  xhr.upload.addEventListener(
    "progress",
    function (e) {
      if (e.lengthComputable) {
        var percentComplete = (e.loaded / e.total) * 100;
        console.log(percentComplete + "% uploaded");
      }
    },
    false
  );

  xhr.onreadystatechange = function () {
    if (this.readyState == 4 && this.status == 200) {
      console.log("上传成功");
    }
  };

  xhr.open("POST", "upload.php", true);

  var formData = new FormData();
  formData.append("file", file);

  xhr.send(formData);
}

这里我们编写了一个名为uploadFile的函数，该函数被调用时，会自动获取用户在表单中选择的文件，并创建一个XMLHttpRequest对象，通过该对象实现文件上传。

在xhr.upload.addEventListener部分，我们对上传进度进行监听，以实现实时显示上传进度的功能。

在xhr.onreadystatechange部分，我们对上传成功后的响应进行处理。

编写服务器端代码

这里我们以PHP为例，编写服务器端代码：

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

// 检查文件大小，不得大于10MB
if ($_FILES["file"]["size"] > 10000000) {
  echo "文件过大";
  $uploadOk = 0;
}

// 检查文件格式，只允许上传jpg、jpeg、png、gif格式的文件
if($imageFileType != "jpg" && $imageFileType != "jpeg" && $imageFileType != "png" && $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 "上传成功";
  } else {
    echo "上传失败";
  }
}
?>

这里我们首先对上传的文件进行了大小和格式的检查，以保证上传的文件符合要求。然后，我们使用move_uploaded_file函数将上传的文件移动到指定的文件夹中。

三、示例说明

接下来，我们通过两个示例详细说明如何使用“js HTML5上传示例代码完整版”。

示例一

我们要上传一个名称为“test.jpg”的文件，并将其保存在服务器上的“uploads”文件夹中。

首先，我们需要在HTML文件中添加如下代码：

<form>
  <input type="file" name="file" id="file" />
  <input type="button" value="上传" onclick="uploadFile()" />
</form>

然后，在JavaScript文件中编写如下代码：

function uploadFile() {
  var file = document.getElementById("file").files[0];
  var xhr = new XMLHttpRequest();

  xhr.upload.addEventListener(
    "progress",
    function (e) {
      if (e.lengthComputable) {
        var percentComplete = (e.loaded / e.total) * 100;
        console.log(percentComplete + "% uploaded");
      }
    },
    false
  );

  xhr.onreadystatechange = function () {
    if (this.readyState == 4 && this.status == 200) {
      console.log("上传成功");
    }
  };

  xhr.open("POST", "upload.php", true);

  var formData = new FormData();
  formData.append("file", file);

  xhr.send(formData);
}

最后，在服务器端PHP文件中添加如下代码：

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

// 检查文件大小，不得大于10MB
if ($_FILES["file"]["size"] > 10000000) {
  echo "文件过大";
  $uploadOk = 0;
}

// 检查文件格式，只允许上传jpg、jpeg、png、gif格式的文件
if($imageFileType != "jpg" && $imageFileType != "jpeg" && $imageFileType != "png" && $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 "上传成功";
  } else {
    echo "上传失败";
  }
}
?>

示例二

我们要实现批量上传，即用户可以同时上传多个文件，将它们保存在服务器上的“uploads”文件夹中。

首先，在HTML文件中添加如下代码：

<form>
  <input type="file" name="file[]" id="file" multiple />
  <input type="button" value="上传" onclick="uploadFile()" />
</form>

注意这里我们使用了multiple属性来允许用户上传多个文件。

然后，在JavaScript文件中编写如下代码：

function uploadFile() {
  var files = document.getElementById("file").files;
  var xhr = new XMLHttpRequest();

  xhr.upload.addEventListener(
    "progress",
    function (e) {
      if (e.lengthComputable) {
        var percentComplete = (e.loaded / e.total) * 100;
        console.log(percentComplete + "% uploaded");
      }
    },
    false
  );

  xhr.onreadystatechange = function () {
    if (this.readyState == 4 && this.status == 200) {
      console.log("上传成功");
    }
  };

  xhr.open("POST", "upload.php", true);

  var formData = new FormData();
  for (var i = 0; i < files.length; i++) {
    formData.append("file[]", files[i]);
  }

  xhr.send(formData);
}

最后，在服务器端PHP文件中添加如下代码：

<?php
$target_dir = "uploads/";
$uploadOk = 1;

foreach ($_FILES["file"]["error"] as $key => $error) {
  if ($error == UPLOAD_ERR_OK) {
    $temp_name = $_FILES["file"]["tmp_name"][$key];
    $name = $_FILES["file"]["name"][$key];
    $target_file = $target_dir . basename($name);
    $imageFileType = strtolower(pathinfo($target_file,PATHINFO_EXTENSION));
    // 检查文件大小，不得大于10MB
    if ($_FILES["file"]["size"][$key] > 10000000) {
      echo $name . " 文件过大";
      $uploadOk = 0;
    }
    // 检查文件格式，只允许上传jpg、jpeg、png、gif格式的文件
    if($imageFileType != "jpg" && $imageFileType != "jpeg" && $imageFileType != "png" && $imageFileType != "gif" ) {
      echo $name . " 只允许上传JPG、JPEG、PNG、GIF格式文件";
      $uploadOk = 0;
    }
    if ($uploadOk == 0) {
      echo "上传失败";
    } else {
      if (move_uploaded_file($temp_name, $target_file)) {
        echo $name . " 上传成功";
      } else {
        echo $name . " 上传失败";
      }
    }
  }
}
?>