使用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写的求多项式导数的函数代码
Jul 04 PHP
php控制linux服务器常用功能 关机 重启 开新站点等
Sep 05 PHP
php递归方法实现无限分类实例代码
Feb 28 PHP
php调用C代码的实现方法
Mar 11 PHP
PHP中iconv函数转码时截断字符问题的解决方法
Jan 21 PHP
php获取从html表单传递数组的方法
Mar 20 PHP
谈谈你对Zend SAPIs(Zend SAPI Internals)的理解
Nov 10 PHP
PHP微信开发之查询微信精选文章
Jun 23 PHP
php lcg_value与mt_rand生成0~1随机小数的效果对比分析
Apr 05 PHP
PHP实现求两个字符串最长公共子串的方法示例
Nov 17 PHP
Yii框架响应组件用法实例分析
Sep 04 PHP
Laravel框架下的Contracts契约详解
Mar 17 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使用Smarty的相关注意事项及访问变量的几种方式
2011/12/08 PHP
php+mysqli实现批量执行插入、更新及删除数据的方法
2015/01/29 PHP
ubuntu下配置nginx+php+mysql详解
2015/09/10 PHP
PHP getDocNamespaces()函数讲解
2019/02/03 PHP
laravel Model 执行事务的实现
2019/10/10 PHP
JavaScript 密码强度判断代码
2009/09/05 Javascript
Javascript中valueOf与toString区别浅析
2013/03/19 Javascript
JQuery加载图片自适应固定大小的DIV
2013/09/12 Javascript
jquery设置元素的readonly和disabled的写法
2013/09/22 Javascript
Jquery easyui 实现动态树
2015/11/17 Javascript
JS全角与半角转化实例(分享)
2017/07/04 Javascript
js + css实现标签内容切换功能(实例讲解)
2017/10/09 Javascript
jQuery实现的中英文切换功能示例
2019/01/11 jQuery
CKEditor 4.4.1 添加代码高亮显示插件功能教程【使用官方推荐Code Snippet插件】
2019/06/14 Javascript
Vue父子传递实例讲解
2020/02/14 Javascript
Vue 打包体积优化方案小结
2020/05/20 Javascript
详解javascript脚本何时会被执行
2021/02/05 Javascript
[00:59]DOTA2背景故事第二期之四大基本法则
2020/07/07 DOTA
python选择排序算法实例总结
2015/07/01 Python
Python实现读取txt文件并画三维图简单代码示例
2017/12/09 Python
Python爬虫之UserAgent的使用实例
2019/02/21 Python
matplotlib 三维图表绘制方法简介
2020/09/20 Python
Css3新特性应用之形状总结
2016/12/08 HTML / CSS
HTML5 实战PHP之Web页面表单设计
2011/10/09 HTML / CSS
html5播放视频且动态截图实现步骤与代码(支持safari其他未测试)
2013/01/06 HTML / CSS
基于HTML5+Webkit实现树叶飘落动画
2017/12/28 HTML / CSS
HTML5 图片悬停放大的实现代码示例
2019/12/04 HTML / CSS
澳大利亚婴儿、幼儿和儿童在线设计师商店:Smooch Baby
2019/02/16 全球购物
波兰珠宝品牌:YES
2019/08/09 全球购物
介绍一下grep命令的使用
2015/06/12 面试题
技校学生个人职业生涯规划范文
2014/03/03 职场文书
软件毕业生个人鉴定
2014/03/03 职场文书
大学生职业生涯规划书参考模板
2014/03/05 职场文书
药剂专业自荐信范文
2014/04/16 职场文书
化工专业求职信
2014/07/01 职场文书
2015年底工作总结范文
2015/05/15 职场文书