使用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的面向对象编程
Oct 09 PHP
php 代码优化的42条建议 推荐
Sep 25 PHP
php循环检测目录是否存在并创建(循环创建目录)
Jan 06 PHP
解析CodeIgniter自定义配置文件
Jun 18 PHP
PHP程序漏洞产生的原因分析与防范方法说明
Mar 06 PHP
php查找字符串出现次数的方法
Dec 01 PHP
php实现根据词频生成tag云的方法
Apr 17 PHP
php生成图片验证码
Jun 09 PHP
thinkPHP中create方法与令牌验证实例浅析
Dec 08 PHP
php array_walk_recursive 使用自定的函数处理数组中的每一个元素
Nov 16 PHP
YII2自动登录Cookie总是失效的解决方法
Jun 28 PHP
laravel config文件配置全局变量的例子
Oct 13 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 断点续传实例详解
2017/11/11 PHP
jquery 框架使用教程 AJAX篇
2009/10/11 Javascript
js 巧妙去除数组中的重复项
2010/01/25 Javascript
jQuery Jcrop插件实现图片选取功能
2011/11/23 Javascript
animate动画示例(泪奔的小孩)及stop和delay的使用
2013/05/06 Javascript
checkbox选中与未选中判断示例
2014/08/04 Javascript
JavaScript检查某个function是否是原生代码的方法
2014/08/20 Javascript
JS处理json日期格式化问题
2015/10/01 Javascript
使用bootstrap typeahead插件实现输入框自动补全之问题及解决办法
2016/07/07 Javascript
Bootstrap响应式侧边栏改进版
2016/09/17 Javascript
详解基于javascript实现的苹果系统底部菜单
2016/12/02 Javascript
Angular.js跨controller实现参数传递的两种方法
2017/02/20 Javascript
JavaScript实现跟随滚动缓冲运动广告框
2017/07/15 Javascript
js链表操作(实例讲解)
2017/08/29 Javascript
IntersectionObserver实现图片懒加载的示例
2017/09/29 Javascript
解析Angular 2+ 样式绑定方式
2018/01/15 Javascript
vue写h5页面的方法总结
2019/02/12 Javascript
jQuery实现的卷帘门滑入滑出效果【案例】
2019/02/18 jQuery
layui 对table中的数据进行转义的实例
2019/09/12 Javascript
VUE渲染后端返回含有script标签的html字符串示例
2019/10/28 Javascript
[14:19]2018年度COSER大赛-完美盛典
2018/12/16 DOTA
基于Python实现一个简单的银行转账操作
2016/03/06 Python
python中实现将多个print输出合成一个数组
2018/04/19 Python
Python实现的字典排序操作示例【按键名key与键值value排序】
2018/12/21 Python
Python之列表实现栈的工作功能
2019/01/28 Python
Python (Win)readline和tab补全的安装方法
2019/08/27 Python
Django自带日志 settings.py文件配置方法
2019/08/30 Python
tensorflow 初始化未初始化的变量实例
2020/02/06 Python
Python GUI库PyQt5样式QSS子控件介绍
2020/02/25 Python
Numpy中np.random.rand()和np.random.randn() 用法和区别详解
2020/10/23 Python
绿色美容,有机护肤品和化妆品:Safe & Chic
2018/10/29 全球购物
一套VC试题
2015/01/23 面试题
经典c++面试题二
2015/08/14 面试题
服装采购员岗位职责
2014/03/15 职场文书
刑事上诉状(量刑过重)
2015/05/23 职场文书
Java9新特性对HTTP2协议支持与非阻塞HTTP API
2022/03/16 Java/Android