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加入动态flash文件的生成的支持
Oct 09 PHP
初级的用php写的采集程序
Mar 16 PHP
PHP中的MYSQL常用函数(php下操作数据库必备)
Sep 12 PHP
php ctype函数中文翻译和示例
Mar 21 PHP
destoon各类调用汇总
Jun 20 PHP
使用ob系列函数实现PHP网站页面静态化
Aug 13 PHP
php实现的Captcha验证码类实例
Sep 22 PHP
Yii数据模型中rules类验证器用法分析
Jul 15 PHP
总结PHP如何获取当前主机、域名、网址、路径、端口和参数等
Sep 09 PHP
php实现微信公众平台发红包功能
Jun 14 PHP
PDO::lastInsertId讲解
Jan 29 PHP
PHP创建XML接口示例
Jul 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+mysql 实现身份验证代码
2010/03/24 PHP
PHP使用递归方式列出当前目录下所有文件的方法
2015/06/02 PHP
解决Laravel5.x的php artisan migrate数据库迁移创建操作报错SQLSTATE[42000]
2020/04/06 PHP
Laravel6.18.19如何优雅的切换发件账户
2020/06/14 PHP
js和jquery中循环的退出和继续下一个循环
2014/09/03 Javascript
JavaScript获取网页中第一个图片id的方法
2015/04/03 Javascript
Highcharts学习之数据列
2016/08/03 Javascript
将html页面保存成图片,图片写入pdf的实现方法(推荐)
2016/09/17 Javascript
JS中页面与页面之间超链接跳转中文乱码问题的解决办法
2016/12/15 Javascript
详解Angular的内置过滤器和自定义过滤器【推荐】
2016/12/26 Javascript
微信小程序 省市区选择器实例详解(附源码下载)
2017/01/05 Javascript
Angularjs实现搜索关键字高亮显示效果
2017/01/17 Javascript
详解VueJs异步动态加载块
2017/03/09 Javascript
JS一个简单的注册页面实例
2017/09/05 Javascript
js实现动态改变radio状态的方法
2018/02/28 Javascript
vue+web端仿微信网页版聊天室功能
2019/04/30 Javascript
Vue filter 过滤当前时间 实现实时更新效果
2019/12/20 Javascript
vue 移动端记录页面浏览位置的方法
2020/03/11 Javascript
javascript实现贪吃蛇经典游戏
2020/04/10 Javascript
[42:24]完美世界DOTA2联赛循环赛 LBZS vs DM BO2第一场 11.01
2020/11/02 DOTA
python非递归全排列实现方法
2017/04/10 Python
python读取与写入csv格式文件的示例代码
2017/12/16 Python
flask中使用蓝图将路由分开写在不同文件实例解析
2018/01/19 Python
Django中Forms的使用代码解析
2018/02/10 Python
用tensorflow搭建CNN的方法
2018/03/05 Python
详解Django项目中模板标签及模板的继承与引用(网站中快速布置广告)
2019/03/27 Python
使用 Django Highcharts 实现数据可视化过程解析
2019/07/31 Python
深入浅析Python科学计算库Scipy及安装步骤
2019/10/12 Python
python自动点赞功能的实现思路
2020/02/26 Python
印度在线购物网站:Paytmmall
2019/07/24 全球购物
财务会计专业毕业生自荐信
2013/10/02 职场文书
求职简历自荐信范文
2013/10/21 职场文书
服务承诺口号
2014/05/22 职场文书
敬老院活动感想
2015/08/07 职场文书
Pytorch 如何加速Dataloader提升数据读取速度
2021/05/28 Python
漫画《尖帽子的魔法工坊》宣布动画化
2022/04/06 日漫