使用PHP和HTML5 FormData实现无刷新文件上传教程


Posted in PHP onSeptember 06, 2014

无刷新文件上传是一个常见而又有点复杂的问题,常见的解决方案是构造 iframe 方式实现。

在 HTML5 中提供了一个 FormData 对象 API,通过 FormData 可以方便地构造一个表单请求,并通过 XMLHttpRequest 来发送。通过 FormData 对象发送文件也是可以的,如此则无刷新上传就变的非常简单了。

那么 FormData 怎么使用呢?下面三水点靠木对此进行简单的介绍。

1. 构造 FormData 对象

想得到一个FormData对象,很简单:

var fd = new FormData();

FormData 对象只提供了一个方法 append ,用于向对象中添加表单请求参数。
在当前主流浏览器中,可通过如下两种方式获取或修改FormData。
方法一:创建一个空的FormData对象,然后再用append方法逐个添加键值对。示例:

var fd = new FormData();
fd.append("name", "三水点靠木");
fd.append("blog", "http://3water.com");
fd.append("file", document.getElementById("file"));

这种方法可以不需要 HTML 的表单对象存在。
方法二:取得form元素对象,将它作为参数传入FormData对象中。示例:

var formobj = document.getElementById("form");
var fd = new FormData(formobj);

当然,这里还可以使用 append 方法继续向 fd 中添加其他参数。

2. FormData 发送请求

得到 FormData 对象了,如何发送请求呢? FormData 对象主要用于增强型的 XMLHttpRequest 对象的 send 方法中。参考如下示例:

var xhr = new XMLHttpRequest();    
xhr.open("POST" ,"http://3water.com" , true);
xhr.send(fd);
xhr.onload = function(e) {
  if (this.status == 200) {
    alert(this.responseText);
  }
};

3. jquery 中使用 FormData

在 jQuery 的 ajax 方法中,也可使用 FormData 方式实现无刷新上传。但要注意参数的设置,参考如下:

$.ajax({
  url: "http://3water.com",
  type: 'POST',
  data: fd,
  /**
   *必须false才会自动加上正确的Content-Type
   */
  contentType:false,
  /**
   * 必须false才会避开jQuery对 formdata 的默认处理
   * XMLHttpRequest会对 formdata 进行正确的处理
   */
  processData:false
}).done(function(result){
  console.log(result);
}).fail(function(err){
  console.log(err);
});

4. 一个完整的示例(包含PHP处理示例):

<?php
//php 接收表单提交信息并打印
if( isset( $_REQUEST['do']) ){
  var_dump($_REQUEST);
  var_dump($_FILES);
  die();
}

?>
<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>FormData Test - 3water.com</title>
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
  </head>
  <body>
    <form id="form">
      <input type="file" name="file" id="file" />
      <input type="text" name="name" id="" value="三水点靠木" />
      <input type="text" name="blog" id="" value="http://3water.com" />
      <input type="submit" name="do" id="do" value="submit" />
    </form>
    <script>
    $("form").submit(function(e){
      e.preventDefault();
      
      //空对象然后添加
      var fd = new FormData();
      fd.append("name", "三水点靠木");
      fd.append("blog", "http://3water.com");
      fd.append("file", document.getElementById("file"));
      //fd.append("file", $(":file")[0].files[0]); //jQuery 方式
      fd.append("do", "submit");
      
      //通过表单对象创建 FormData
      var fd = new FormData(document.getElementById("form"));
      //var fd = new FormData($("form:eq(0)")[0]); //jquery 方式
      
      //XMLHttpRequest 原生方式发送请求
      var xhr = new XMLHttpRequest();    
      xhr.open("POST" ,"" , true);
      xhr.send(fd);
      xhr.onload = function(e) {
        if (this.status == 200) {
          alert(this.responseText);
        };
      };
      return;
      //jQuery 方式发送请求
      $.ajax({
        type:"post",
        //url:"",
        data: fd,
        processData: false,
        contentType: false
      }).done(function(res){
        console.log(res);
      });
      
      return false;
    });
    </script>
  </body>
</html>
PHP 相关文章推荐
检查php文件中是否含有bom的函数
May 31 PHP
基于simple_html_dom的使用小结
Jul 01 PHP
Discuz7.2版的faq.php SQL注入漏洞分析
Aug 06 PHP
ThinkPHP的MVC开发机制实例解析
Aug 23 PHP
php根据用户语言跳转相应网页
Nov 04 PHP
PHP浮点数的一个常见问题
Mar 10 PHP
php中的登陆login实例代码
Jun 20 PHP
php表单处理操作
Nov 16 PHP
php处理抢购类功能的高并发请求
Feb 08 PHP
PHP面向对象之里氏替换原则简单示例
Apr 08 PHP
php strftime函数的详细用法
Jun 21 PHP
Laravel (Lumen) 解决JWT-Auth刷新token的问题
Oct 24 PHP
Windows下的PHP 5.3.x安装 Zend Guard Loader教程
Sep 06 #PHP
php获取一个变量的名字的方法
Sep 05 #PHP
Yii使用find findAll查找出指定字段的实现方法
Sep 05 #PHP
如何让thinkphp在模型中自动完成session赋值小教程
Sep 05 #PHP
php清空(删除)指定目录下的文件,不删除目录文件夹的实现代码
Sep 04 #PHP
Chrome Web App开发小结
Sep 04 #PHP
Yii查询生成器(Query Builder)用法实例教程
Sep 04 #PHP
You might like
PHP中一个控制字符串输出的函数
2006/10/09 PHP
Zend studio for eclipse中使php可以调用mysql相关函数的设置方法
2008/10/13 PHP
PHP教程 基本语法
2009/10/23 PHP
php学习笔记 数组遍历实现代码
2011/06/09 PHP
使用gd库实现php服务端图片裁剪和生成缩略图功能分享
2013/12/25 PHP
100多行PHP代码实现socks5代理服务器[2]
2016/05/05 PHP
PHP5.0 TIDY_PARSE_FILE缓冲区溢出漏洞的解决方案
2018/10/14 PHP
简单通用的JS滑动门代码
2008/12/19 Javascript
理解Javascript_01_理解内存分配原理分析
2010/10/11 Javascript
鼠标经过显示二级菜单js特效
2013/08/13 Javascript
js中Math之random,round,ceil,floor的用法总结
2013/12/26 Javascript
javascript判断css3动画结束 css3动画结束的回调函数
2015/03/10 Javascript
JavaScript实现在标题栏上显示当前日期的方法
2015/03/19 Javascript
基于JS实现简单的样式切换效果代码
2015/09/04 Javascript
jQuery实现form表单基于ajax无刷新提交方法详解
2015/12/08 Javascript
JavaScript读二进制文件并用ajax传输二进制流的方法
2016/07/18 Javascript
详解JavaScript时间处理之几个月前或几个月后的指定日期
2016/12/21 Javascript
JavaScript实现翻页功能(附效果图)
2017/02/16 Javascript
简单实现jQuery弹窗效果
2017/10/30 jQuery
tracking.js页面人脸识别插件使用方法
2020/04/16 Javascript
vue实现的下拉框功能示例
2019/01/29 Javascript
通过vue手动封装on、emit、off的代码详解
2019/05/29 Javascript
JavaScript深入V8引擎以及编写优化代码的5个技巧
2019/06/24 Javascript
python的tkinter布局之简单的聊天窗口实现方法
2014/09/03 Python
Python将一个Excel拆分为多个Excel
2018/11/07 Python
详解html5 canvas 微信海报分享(个人爬坑)
2018/01/12 HTML / CSS
香港交友网站:be2香港
2018/07/22 全球购物
自我评价是什么
2014/01/04 职场文书
家长给孩子的表扬信
2014/01/17 职场文书
2014年幼儿园教师工作总结
2014/11/08 职场文书
企业反腐倡廉心得体会
2015/08/15 职场文书
教师远程培训心得体会
2016/01/09 职场文书
《詹天佑》教学反思
2016/02/20 职场文书
大学生自我鉴定怎么写
2019/05/07 职场文书
Oracle 触发器trigger使用案例
2022/02/24 Oracle
分享几个实用的CSS代码块
2022/06/10 HTML / CSS