主页 > 知识库 > php 下 html5 XHR2 + FormData + File API 上传文件操作实例分析

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

热门标签:Mysql连接数设置 阿里云 科大讯飞语音识别系统 银行业务 Linux服务器 团购网站 服务器配置 电子围栏

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

更多关于PHP相关内容感兴趣的读者可查看本站专题:《php文件操作总结》、《PHP目录操作技巧汇总》、《PHP常用遍历算法与技巧总结》、《PHP数据结构与算法教程》、《php程序设计算法总结》及《PHP网络编程技巧总结》

希望本文所述对大家PHP程序设计有所帮助。

您可能感兴趣的文章:
  • html form表单基础入门案例讲解
  • HTML的form表单和django的form表单
  • PHP使用HTML5 FormData对象提交表单操作示例
  • Asp.net webForm设置允许表单提交Html的方法
  • Java Web使用Html5 FormData实现多文件上传功能
  • transform实现HTML5 video标签视频比例拉伸实例详解
  • C#通过html调用WinForm的方法
  • HTML form表单提交方法案例详解

标签:衡水 广元 江苏 枣庄 衢州 萍乡 大理 蚌埠

巨人网络通讯声明:本文标题《php 下 html5 XHR2 + FormData + File API 上传文件操作实例分析》,本文关键词  ;如发现本文内容存在版权问题,烦请提供相关信息告之我们,我们将及时沟通与处理。本站内容系统采集于网络,涉及言论、版权与本站无关。
  • 相关文章
  • 收缩
    • 微信客服
    • 微信二维码
    • 电话咨询

    • 400-1100-266