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


Posted in PHP onFebruary 28, 2020

本文实例讲述了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 Ajax乱码
Apr 09 PHP
php eval函数用法 PHP中eval()函数小技巧
Oct 31 PHP
基于php iconv函数的使用详解
Jun 09 PHP
php使用cookie保存用户登录的用户名实例
Jan 26 PHP
php去除二维数组的重复项方法
Nov 03 PHP
php生成gif动画的方法
Nov 05 PHP
PHP基于单例模式实现的数据库操作基类
Jan 15 PHP
10个对初学者非常有用的PHP技巧
Apr 06 PHP
ThinkPHP3.2框架自定义配置和加载用法示例
Jun 14 PHP
PHP中单例模式的使用场景与使用方法讲解
Mar 18 PHP
PHP中将一个字符串部分字符用星号*替代隐藏的实现代码
Sep 08 PHP
PHP连续签到功能实现方法详解
Dec 04 PHP
php的无刷新操作实现方法分析
Feb 28 #PHP
php下的原生ajax请求用法实例分析
Feb 28 #PHP
php5.3/5.4/5.5/5.6/7常见新增特性汇总整理
Feb 27 #PHP
php使用fputcsv实现大数据的导出操作详解
Feb 27 #PHP
gearman中任务的优先级和返回状态实例分析
Feb 27 #PHP
gearman中worker常驻后台,导致MySQL server has gone away的解决方法
Feb 27 #PHP
PHP使用gearman进行异步的邮件或短信发送操作详解
Feb 27 #PHP
You might like
PHP设计模式之结构模式的深入解析
2013/06/13 PHP
PHP中生成UUID自定义函数分享
2015/06/10 PHP
php函数连续调用实例分析
2015/07/30 PHP
php版微信公众平台开发之验证步骤实例详解
2016/09/23 PHP
Javascript学习笔记1 数据类型
2010/01/11 Javascript
在浏览器中获取当前执行的脚本文件名的代码
2011/07/19 Javascript
JQuery仿小米手机抢购页面倒计时效果
2014/12/16 Javascript
javascript实现表格排序 编辑 拖拽 缩放
2015/01/02 Javascript
谈谈我对JavaScript原型和闭包系列理解(随手笔记6)
2015/12/20 Javascript
Jquery中map函数的用法
2016/06/03 Javascript
自动化测试读写64位操作系统的注册表
2016/08/15 Javascript
详解js的事件代理(委托)
2016/12/22 Javascript
vue拦截器Vue.http.interceptors.push使用详解
2017/04/22 Javascript
Angular实现表单验证功能
2017/11/13 Javascript
Vue EventBus自定义组件事件传递
2018/06/25 Javascript
利用JS动态生成隔行换色HTML表格的两种方法
2018/10/09 Javascript
vue vantUI实现文件(图片、文档、视频、音频)上传(多文件)
2019/10/15 Javascript
[50:38]DOTA2-DPC中国联赛 正赛 Phoenix vs CDEC BO3 第二场 3月7日
2021/03/11 DOTA
Python实现的科学计算器功能示例
2017/08/04 Python
Python3实现的简单验证码识别功能示例
2018/05/02 Python
如何使用Python进行OCR识别图片中的文字
2019/04/01 Python
关于pytorch多GPU训练实例与性能对比分析
2019/08/19 Python
JAVA的事件委托机制和垃圾回收机制
2014/09/07 面试题
国际经济贸易专业推荐信
2013/11/06 职场文书
机电一体化自荐信
2013/12/10 职场文书
个人收入证明范本
2014/01/12 职场文书
大学军训感言400字
2014/03/11 职场文书
高中军训感言600字
2014/03/11 职场文书
关工委先进个人事迹材料
2014/05/23 职场文书
物业消防安全责任书
2014/07/23 职场文书
优秀共产党员演讲稿
2014/09/04 职场文书
先进班组材料范文
2014/12/25 职场文书
专业技术人员年度考核评语
2014/12/31 职场文书
党员年终个人总结
2015/02/14 职场文书
2015年前台个人工作总结
2015/04/03 职场文书
解决使用了nginx获取IP地址都是127.0.0.1 的问题
2021/09/25 Servers