php 下 html5 XHR2 + FormData + File API 上传文件操作实例分析

发布:smiling　来源: PHP粉丝网　添加日期：2022-02-15 10:30:56　浏览: 评论：0　

本文实例讲述了php 下 html5 XHR2 + FormData + File API 上传文件操作，分享给大家供大家参考，具体如下：

FormData的作用：

FormData对象可以帮助我们自动的打包表单数据，通过XMLHttpRequest的send()方法来提交表单。当然FormData也可以动态的append数据，FormData的最大优点就是我们可以异步上传一个二进制文件。

例1如下：

<!DOCTYPE HTML>

<html lang="zh-CN">

<head>

  <meta charset="UTF-8">

  <title></title>

</head>

<body>

  <form method="post" id="myForm" onsubmit="return post();">

    用户名<input type="text" name="uname" />

    密码<input type="password" name="upwd" />

    邮箱<input type="text" name="uemail" />

    <input type="submit" name="submit" value="提交" />

  </form>

</body>

<script type="text/javascript">

function post() {

  var myForm = document.getElementById("myForm");

  //FormData既可以从表单读取数据，也可以动态append(键,值)添加

  var fd = new FormData(myForm);

  var xhr = new XMLHttpRequest();

  xhr.onreadystatechange = function () {

    if (xhr.readyState == 4) {

      alert(this.responseText);

    }

  };

  xhr.open("post", "post.php", true);

  xhr.send(fd);

  return false;

}

</script>

</html>

File API

使用HTML5 DOM新增的File API，现在可以让网页要求用户选择本地文件，并且读取这些文件的信息了。

通过File API，我们可以在用户选取一个或者多个文件之后，访问到代表了所选文件的一个或多个File对象，这些对象被包含在一个FileList对象中。

<!DOCTYPE HTML>

<html lang="zh-CN">

<head>

  <meta charset="UTF-8">

  <title></title>

</head>

<body>

  <form method="post" id="myForm">

    <input type="file" name="file" id="upfile" />

    <input type="submit" name="submit" value="提交" />

  </form>

</body>

<script type="text/javascript">

  var upfile = document.getElementById("upfile");

  upfile.onchange = function() {

    var file = this.files[0];

    alert("文件名:" + file.name + "\r\n" + "大小:" + file.size + "\r\n");

  };

</script>

</html>

我们通过FormData + File API 上传文件

<!DOCTYPE HTML>

<html lang="zh-CN">

<head>

  <meta charset="UTF-8">

  <title></title>

</head>

<body>

  <form method="post" id="myForm">

    <input type="file" name="file" id="upfile" />

    <input type="submit" name="submit" value="提交" />

  </form>

</body>

<script type="text/javascript">

  var myForm = document.getElementById("myForm");

  var upfile = document.getElementById("upfile");

  myForm.onsubmit = function() {

    //我们创建一个FormData对象

    var fd = new FormData();

    var file = upfile.files[0];

    //把文件添加到FormData对象中

    fd.append("file", file);

    var xhr = new XMLHttpRequest();

    xhr.onreadystatechange = function () {

      if (xhr.readyState == 4) {

        alert(this.responseText);

      }

    };

    xhr.open("post", "upfile.php", true);

    //发送FormData对象

    xhr.send(fd);

    return false;

  };

</script>

</html>

upfile.php代码如下：

<?php

$uploadDir = './upload/';

if(!file_exists($uploadDir)) {

  @mkdir($uploadDir, 0777, true);

}

$uploadFile = $uploadDir . basename($_FILES['file']['name']);

if(move_uploaded_file($_FILES['file']['tmp_name'], $uploadFile)) {

  echo "OK";

} else {

  echo "NO";

}

使用对象URL来显示你所选择的图片

通过window.URL.createObjectURL()和 window.URL.revokeObjectURL()两个DOM方法。

这两个方法创建简单的URL字符串对象，用于指向任何 DOM File 对象数据，包括用户电脑中的本地文件。

<!DOCTYPE HTML>

<html lang="zh-CN">

<head>

  <meta charset="UTF-8">

  <title></title>

</head>

<body>

  <form method="post" id="myForm">

    <input type="file" name="file" id="upfile" />

    <input type="submit" name="submit" value="提交" />

  </form>

</body>

<script type="text/javascript">

  var myForm = document.getElementById("myForm");

  var upfile = document.getElementById("upfile");

  upfile.onchange = function() {

    //创建一个img标签

    var img = document.createElement("img");

    //通过file对象创建对象URL

    img.src = window.URL.createObjectURL(this.files[0]);

    img.height = 60;

    img.onload = function() {

      //释放对象URL

      window.URL.revokeObjectURL(this.src);

    };

    document.body.appendChild(img);

  };

  myForm.onsubmit = function() {

    //我们创建一个FormData对象

    var fd = new FormData();

    var file = upfile.files[0];

    //把文件添加到FormData对象中

    fd.append("file", file);

    var xhr = new XMLHttpRequest();

    xhr.onreadystatechange = function () {

      if (xhr.readyState == 4) {

        alert(this.responseText);

      }

    };

    xhr.open("post", "upfile.php", true);

    //发送FormData对象

    xhr.send(fd);

    return false;

  };

</script>

</html>