js HTML5上传示例代码完整版

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

一、前言

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

二、主要步骤

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

  1. 创建上传表单
<!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,否则无法上传文件。

  1. 编写前端上传代码
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部分,我们对上传成功后的响应进行处理。

  1. 编写服务器端代码

这里我们以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 . " 上传失败";
      }
    }
  }
}
?>

四、总结

通过以上的两个示例,我们可以看出使用“js HTML5上传示例代码完整版”进行文件上传,需要注意以下几点:

  1. HTML表单需要设置enctype属性为multipart/form-data;
  2. 使用JavaScript代码创建XMLHttpRequest对象实现文件上传,需要注意添加事件监听,以实现实时显示上传进度;
  3. 服务端代码需要对上传的文件进行大小和格式检查,以确保上传的文件符合要求。

好了,以上就是有关“js HTML5上传示例代码完整版”的完整攻略,希望对你有所帮助。

本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:js HTML5上传示例代码完整版 - Python技术站

(0)
上一篇 2023年6月10日
下一篇 2023年6月10日

相关文章

  • JavaScript动态生成二维码图片

    生成二维码图片是前端开发中经常会需要用到的功能,而JavaScript可以通过借助第三方库来轻松实现它。下面介绍一下如何使用JavaScript动态生成二维码图片的完整攻略。 安装第三方库 在实现动态生成二维码图片之前,需要使用第三方库来处理二维码生成的逻辑。这里介绍一个常用的库 qrcodejs2,它可以将一个字符串生成为对应的二维码图片。 可以通过npm…

    JavaScript 2023年6月11日
    00
  • js截取固定长度的中英文字符的简单实例

    下面是“js截取固定长度的中英文字符的简单实例”的完整攻略: 一、问题描述 在开发中,我们常常需要截取给定字符串中的前若干个字符,但是中英文字符长度不同,因此需要针对英文字符和中文字符采用不同的截取方式。 二、解决方案 1. 利用charCodeAt方法 charCodeAt() 方法可返回指定位置的字符的 Unicode 编码。通过判断字符的Unicode…

    JavaScript 2023年5月19日
    00
  • 基于AGS JS开发自定义贴图图层

    以下是关于基于AGS JS开发自定义贴图图层的完整攻略: 1. 什么是AGS JS? AGS(ArcGIS Server) JS(Javascript)是ArcGIS平台的JavaScript API,它提供了一种简单而强大的方式来创建Web地图和Web应用程序。AGS JS通过使用JavaScript语言和预定义的类库,可以轻松地构建具有各种GIS功能的W…

    JavaScript 2023年6月11日
    00
  • 实现JavaScript中继承的三种方式

    实现JavaScript中继承的三种方式包括:原型链继承、构造函数继承和组合继承。 1. 原型链继承 原型链继承是通过将子类的原型指向父类实例来实现继承的。代码示例如下: // 父类 function Person(name) { this.name = name; } Person.prototype.sayHello = function() { con…

    JavaScript 2023年5月27日
    00
  • javaScript中with函数用法实例分析

    JavaScript中with函数用法实例分析 with函数是JavaScript中的一个特殊函数,用来简化代码编写。尽管with函数的用法看起来很简单,但是使用不当可能会导致代码混乱,因此在使用with函数时需要谨慎。 本文将从以下方面详细讲解with函数的用法,包括: with函数的用法 with函数的实例分析 with函数的用法 with函数的语法: …

    JavaScript 2023年6月10日
    00
  • JavaScript学习笔记之JS事件对象

    JavaScript学习笔记之JS事件对象 什么是JS事件对象 JavaScript事件对象(Event Object)是在事件被触发时由浏览器自动创建的对象,它包含了与事件相关的所有信息,我们可以通过JS事件对象来获取一些有用的信息,如事件类型、触发事件的元素、鼠标的位置等。 JS事件对象的属性 以下是JS事件对象常用的属性: type:事件类型,如”cl…

    JavaScript 2023年5月18日
    00
  • javascript中类的定义方式详解(四种方式)

    下面是“JavaScript中类的定义方式详解(四种方式)”的完整攻略。 1. ES6中的class关键字 在ES6中添加了class关键字,使得JavaScript也具有了面向对象编程的能力。 使用class定义一个类,实例化一个类用关键字new来实现。 class Person { constructor(name, age) { this.name =…

    JavaScript 2023年5月27日
    00
  • 服务器端C#实现的CSS解析器

    服务器端C#实现的CSS解析器攻略 简介 服务器端C#实现的CSS解析器可以帮助我们在服务器端解析CSS文件,方便我们对于CSS文件进行修改、分析、压缩以及提取样式等操作。在本篇攻略中,我们将会讲解如何使用C#实现CSS解析器,以及其中的两个示例应用。 实现步骤 以下是使用C#实现CSS解析器的步骤: 安装NuGet包“CssParser”,该NuGet包是…

    JavaScript 2023年5月28日
    00
合作推广
合作推广
分享本页
返回顶部