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速度全攻略
Oct 09 PHP
一个改进的UBB类
Oct 09 PHP
加强版phplib的DB类
Mar 31 PHP
第4章 数据处理-php数组的处理-郑阿奇
Jul 04 PHP
php中获取远程客户端的真实ip地址的方法
Aug 03 PHP
yii2使用ajax返回json的实现方法
May 14 PHP
简单PHP会话(session)说明介绍
Aug 21 PHP
PHP用FTP类上传文件视频等的简单实现方法
Sep 23 PHP
highchart数据源纵轴json内的值必须是int(详解)
Feb 20 PHP
php+Ajax处理xml与json格式数据的方法示例
Mar 04 PHP
解决php写入数据库乱码的问题
Sep 17 PHP
php模拟实现斗地主发牌
Apr 22 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开发中常用的三个表单验证函数使用小结
2010/03/03 PHP
THINKPHP+JS实现缩放图片式截图的实现
2010/03/07 PHP
PHP数组循环操作详细介绍 附实例代码
2013/02/03 PHP
php+mysqli批量查询多张表数据的方法
2015/01/29 PHP
让whoops帮我们告别ThinkPHP6的异常页面
2020/03/02 PHP
JavaScript 异步调用框架 (Part 3 - 代码实现)
2009/08/04 Javascript
javaScript(JS)替换节点实现思路介绍
2013/04/17 Javascript
使用原生JS实现弹出层特效
2014/12/22 Javascript
Javascript连接Access数据库完整实例
2015/08/03 Javascript
jQuery+css3实现Ajax点击后动态删除功能的方法
2015/08/10 Javascript
jQuery代码实现对话框右上角菜单带关闭×
2016/05/03 Javascript
原生js仿jquery实现对Ajax的封装
2016/10/04 Javascript
微信小程序 视图容器组件的详解及实例代码
2017/01/19 Javascript
jQuery中extend函数简单用法示例
2017/10/11 jQuery
JS获取当前地理位置的方法
2017/10/25 Javascript
NodeJS爬虫实例之糗事百科
2017/12/14 NodeJs
vue 做移动端微信公众号采坑经验记录
2018/04/26 Javascript
Vue路由钩子之afterEach beforeEach的区别详解
2018/07/15 Javascript
js+html实现点名系统功能
2019/11/05 Javascript
vue实现在进行增删改操作后刷新页面
2020/08/05 Javascript
Vue Object.defineProperty及ProxyVue实现双向数据绑定
2020/09/02 Javascript
js实现移动端图片滑块验证功能
2020/09/29 Javascript
Python排序搜索基本算法之选择排序实例分析
2017/12/09 Python
python中datetime模块中strftime/strptime函数的使用
2018/07/03 Python
pytorch 转换矩阵的维数位置方法
2018/12/08 Python
使用Python实现图像标记点的坐标输出功能
2019/08/14 Python
利用纯html5绘制出来的一款非常漂亮的时钟
2015/01/04 HTML / CSS
LivingSocial英国:英国本地优惠
2019/02/22 全球购物
事业单位公务员的职业生涯规划
2014/01/15 职场文书
舞蹈教师自荐信
2014/01/27 职场文书
社区庆八一活动方案
2014/02/02 职场文书
团购业务员岗位职责
2014/03/15 职场文书
英语教师自荐信
2014/05/26 职场文书
小学感恩教育活动总结
2014/07/07 职场文书
单位考核聘任报告
2015/03/02 职场文书
MySQL连表查询分组去重的实现示例
2021/07/01 MySQL