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 相关文章推荐
初学者入门:细述PHP4的核心Zend
Sep 05 PHP
解决中英文字符串长度问题函数
Jan 16 PHP
smarty的保留变量问题
Oct 23 PHP
php在服务器执行exec命令失败的解决方法
Mar 03 PHP
PHP编码规范的深入探讨
Jun 06 PHP
解析zend studio中直接导入svn中的项目的方法步骤
Jun 21 PHP
学习php设计模式 php实现工厂模式(factory)
Dec 07 PHP
详解PHP的Yii框架中日志的相关配置及使用
Dec 08 PHP
[原创]PHP实现逐行删除文件右侧空格的方法
Dec 25 PHP
WordPress开发中用于标题显示的相关函数使用解析
Jan 07 PHP
PHP simplexml_import_dom()函数讲解
Feb 03 PHP
thinkphp5框架实现数据库读取的数据转换成json格式示例
Oct 10 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
解决MySQL中文输出变成问号的问题
2008/06/05 PHP
php获取ip的三个属性区别介绍(HTTP_X_FORWARDED_FOR,HTTP_VIA,REMOTE_ADDR)
2012/09/23 PHP
php从数组中随机抽取一些元素的代码
2012/11/05 PHP
基于preg_match_all采集后数据处理的一点心得笔记(编码转换和正则匹配)
2014/01/31 PHP
CI框架学习笔记(二) -入口文件index.php
2014/10/27 PHP
Codeigniter通过SimpleXML将xml转换成对象的方法
2015/03/19 PHP
Windows下Apache + PHP SESSION丢失的解决过程全纪录
2015/04/07 PHP
thinkphp框架下404页面设置 仅三步
2016/05/14 PHP
php+ajax实现异步上传文件或图片功能
2017/07/18 PHP
使用PHP连接数据库_实现用户数据的增删改查的整体操作示例
2017/09/01 PHP
JavaScript 学习笔记(六)
2009/12/31 Javascript
动态加载图片路径 保持JavaScript控件的相对独立性
2010/09/06 Javascript
js中apply方法的使用详细解析
2013/11/04 Javascript
Jquery实现的一种常用高亮效果示例代码
2014/01/28 Javascript
Jquery 在页面加载后执行的几种方式
2014/03/14 Javascript
Javascript基础知识(二)事件
2014/09/29 Javascript
浅谈jQuery中height与width
2015/07/06 Javascript
Bootstrap3多级下拉菜单
2017/02/24 Javascript
详解基于iview-ui的导航栏路径(面包屑)配置
2019/02/22 Javascript
JQuery插件tablesorter表格排序实现过程解析
2020/05/28 jQuery
[24:42]VP vs TNC Supermajor小组赛B组 BO3 第三场 6.2
2018/06/03 DOTA
[37:47]IG vs Winstrike 2018国际邀请赛小组赛BO2 第二场 8.19
2018/08/21 DOTA
[46:28]EG vs Liquid 2019国际邀请赛淘汰赛 败者组 BO3 第二场 8.23
2019/09/05 DOTA
python下MySQLdb用法实例分析
2015/06/08 Python
python web框架学习笔记
2016/05/03 Python
Python的Django框架中forms表单类的使用方法详解
2016/06/21 Python
详解python string类型 bytes类型 bytearray类型
2017/12/16 Python
啥是佩奇?使用Python自动绘画小猪佩奇的代码实例
2019/02/20 Python
Python实现一个数组除以一个数的例子
2019/07/20 Python
python 实现兔子生兔子示例
2019/11/21 Python
pytorch: Parameter 的数据结构实例
2019/12/31 Python
Python写出新冠状病毒确诊人数地图的方法
2020/02/12 Python
如何使用pandas读取txt文件中指定的列(有无标题)
2020/03/05 Python
大学生简短的自我评价分享
2014/02/20 职场文书
演讲开场白台词大全
2015/05/29 职场文书
java实现面板之间切换功能
2022/06/10 Java/Android