欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-11-23 18:55:28
本文实例讲述了php 下 html5 xhr2 + formdata + file api 上传文件操作。分享给大家供大家参考,具体如下:formdata的作用:formdata对象可以帮助我们自动的...

本文实例讲述了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>