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学习之PHP变量
Oct 09 PHP
新手学PHP之数据库操作详解及乱码解决!
Jan 02 PHP
php 信息采集程序代码
Mar 17 PHP
PHP 命令行参数详解及应用
May 18 PHP
一个好用的PHP验证码类实例分享
Dec 27 PHP
php中socket通信机制实例详解
Jan 03 PHP
写一段简单的PHP建立文件夹代码
Jan 06 PHP
PHP浮点数的一个常见问题
Mar 10 PHP
php获取POST数据的三种方法实例详解
Dec 20 PHP
浅谈Laravel队列实现原理解决问题记录
Aug 19 PHP
PHP实现二叉树深度优先遍历(前序、中序、后序)和广度优先遍历(层次)实例详解
Apr 20 PHP
实现laravel 插入操作日志到数据库的方法
Oct 11 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
使用eAccelerator加密PHP程序
2008/10/03 PHP
PHP数组编码gbk与utf8互相转换的两种方法
2016/09/01 PHP
Yii2框架中日志的使用方法分析
2017/05/22 PHP
浅析hasOwnProperty方法的应用
2013/11/20 Javascript
js判断字符长度及中英文数字等
2014/03/19 Javascript
推荐JavaScript实现继承的最佳方式
2014/11/11 Javascript
JavaScript使用replace函数替换字符串的方法
2015/04/06 Javascript
第四章之BootStrap表单与图片
2016/04/25 Javascript
12个非常实用的JavaScript小技巧【推荐】
2016/05/18 Javascript
Web前端开发之水印、图片验证码
2016/11/27 Javascript
jquery实时获取时间的简单实例
2017/01/26 Javascript
JavaScript手风琴页面制作
2017/05/17 Javascript
Bootstrap 表单验证formValidation 实现远程验证功能
2017/05/17 Javascript
promise处理多个相互依赖的异步请求(实例讲解)
2017/08/03 Javascript
详解基于 Node.js 的轻量级云函数功能实现
2019/07/08 Javascript
JS开发 富文本编辑器TinyMCE详解
2019/07/19 Javascript
VUE中使用HTTP库Axios方法详解
2020/02/05 Javascript
Python实现的质因式分解算法示例
2018/05/03 Python
Django实现全文检索的方法(支持中文)
2018/05/14 Python
示例详解Python3 or Python2 两者之间的差异
2018/08/23 Python
Python实现滑动平均(Moving Average)的例子
2019/08/24 Python
python hmac模块验证客户端的合法性
2020/11/07 Python
Pycharm配置lua编译环境过程图解
2020/11/28 Python
解决PDF 转图片时丢文字的一种可能方式
2021/03/04 Python
C和C++经典笔试题附答案解析
2014/08/18 面试题
不用游标的SQL语句有哪些
2012/09/07 面试题
4s客服专员岗位职责
2013/12/01 职场文书
社区母亲节活动记录
2014/03/06 职场文书
企业宣传工作方案
2014/06/02 职场文书
公司董事长助理工作职责
2014/07/12 职场文书
甜品店创业计划书
2014/08/14 职场文书
小王子读书笔记
2015/06/29 职场文书
Mysql分库分表之后主键处理的几种方法
2022/02/15 MySQL
Golang并发工具Singleflight
2022/05/06 Golang
彻底弄懂Python中的回调函数(callback)
2022/06/25 Python
微软发布Windows 11今年最大更新22H2(附 ISO 镜像官方下载)
2022/09/23 数码科技