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数组对百万数据进行排除重复数据的实现代码
Jun 08 PHP
php中3种方法统计字符串中每种字符的个数并排序
Aug 27 PHP
php查找指定目录下指定大小文件的方法
Nov 28 PHP
PHP伪造来源HTTP_REFERER的方法实例详解
Jul 06 PHP
PHP实现搜索地理位置及计算两点地理位置间距离的实例
Jan 08 PHP
php微信公众平台开发之微信群发信息
Sep 13 PHP
解决Yii2邮件发送结果返回成功,但接收不到邮件的问题
May 23 PHP
php面向对象的用户登录身份验证
Jun 08 PHP
深入理解Yii2.0乐观锁与悲观锁的原理与使用
Jul 26 PHP
PHP使用Redis长连接的方法详解
Feb 12 PHP
Thinkphp5 如何隐藏入口文件index.php(URL重写)
Oct 16 PHP
php解析非标准json、非规范json的方式实例
Dec 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
B2K与车机的中波PK
2021/03/02 无线电
在字符串指定位置插入一段字符串的php代码
2010/02/16 PHP
php array_walk() 数组函数
2011/07/12 PHP
PHP实现删除非站内外部链接实例代码
2014/06/17 PHP
PHP中类型转换 ,常量,系统常量,魔术常量的详解
2017/10/26 PHP
laravel框架邮箱认证实现方法详解
2019/11/22 PHP
Laravel框架使用技巧之使用url()全局函数返回前一个页面的地址方法详解
2020/04/06 PHP
js 模拟气泡屏保效果代码
2010/07/10 Javascript
javascript实现网页背景烟花效果的方法
2015/08/06 Javascript
angular select 默认值设置方法
2017/06/23 Javascript
AngularJS动态添加数据并删除的实例
2018/02/27 Javascript
基于webpack.config.js 参数详解
2018/03/20 Javascript
详谈js的变量提升以及使用方法
2018/10/06 Javascript
服务端预渲染之Nuxt(使用篇)
2019/04/08 Javascript
[02:27]2018DOTA2亚洲邀请赛趣味视频之钓鱼大赛 谁是垂钓冠军?
2018/04/05 DOTA
Python操作串口的方法
2015/06/17 Python
python中nan与inf转为特定数字方法示例
2017/05/11 Python
python中itertools模块zip_longest函数详解
2018/06/12 Python
python中的常量和变量代码详解
2018/07/25 Python
详解Django+uwsgi+Nginx上线最佳实战
2019/03/14 Python
python3使用matplotlib绘制条形图
2020/03/25 Python
Django中Middleware中的函数详解
2019/07/18 Python
Keras实现支持masking的Flatten层代码
2020/06/16 Python
Python第三方库安装缓慢的解决方法
2021/02/06 Python
基于HTML5 FileSystem API的使用介绍
2013/04/24 HTML / CSS
HTML5触摸事件实现移动端简易进度条的实现方法
2018/05/04 HTML / CSS
国家地理在线商店:Shop National Geographic
2018/06/30 全球购物
美国CVS药店官网:CVS Pharmacy
2018/07/26 全球购物
文艺演出策划方案
2014/06/07 职场文书
青奥会口号
2014/06/12 职场文书
拾金不昧锦旗标语
2014/06/27 职场文书
乡镇群众路线教育实践活动整改措施
2014/10/04 职场文书
2014年工程工作总结
2014/11/25 职场文书
文明单位申报材料
2014/12/23 职场文书
八年级数学教学反思
2016/02/17 职场文书
2019秋季运动会口号
2019/06/25 职场文书