使用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 auth_http类库进行身份效验
Mar 19 PHP
PHP开发负载均衡指南
Jul 17 PHP
那些年一起学习的PHP(二)
Mar 21 PHP
探讨:如何使用PHP实现计算两个日期间隔的年、月、周、日数
Jun 13 PHP
php获取网页请求状态程序示例
Jun 17 PHP
php中的观察者模式简单实例
Jan 20 PHP
部署PHP时的4个配置修改说明
Oct 19 PHP
Yii实现显示静态页的方法
Apr 25 PHP
Adnroid 微信内置浏览器清除缓存
Jul 11 PHP
PHP Mysqli 常用代码集合
Nov 12 PHP
PHP获取当前执行php文件名的代码
Mar 02 PHP
PHP生成各种随机验证码的方法总结【附demo源码】
Jun 05 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的ajax框架xajax入门与试用介绍
2010/12/19 PHP
PHP防盗链的基本思想 防盗链的设置方法
2015/09/25 PHP
jquery 图片截取工具jquery.imagecropper.js
2010/04/09 Javascript
一个仿糯米弹框效果demo
2014/07/22 Javascript
Nodejs学习笔记之NET模块
2015/01/13 NodeJs
jQuery实现产品对比功能附源码下载
2016/08/09 Javascript
JS当前页面登录注册框,固定DIV,底层阴影的实例代码
2016/09/29 Javascript
JavaScript使用readAsDataURL读取图像文件
2017/05/10 Javascript
gulp教程_从入门到项目中快速上手使用方法
2017/09/14 Javascript
用Webpack构建Vue项目的实践
2017/11/07 Javascript
判断滚动条滑到底部触发事件(实例讲解)
2017/11/15 Javascript
js实现把时间戳转换为yyyy-MM-dd hh:mm 格式(es6语法)
2017/12/28 Javascript
实例解析ES6 Proxy使用场景介绍
2018/01/08 Javascript
javascript获取select值的方法完整实例
2019/06/20 Javascript
python 生成目录树及显示文件大小的代码
2009/07/23 Python
python paramiko实现ssh远程访问的方法
2013/12/03 Python
Python 递归函数详解及实例
2016/12/27 Python
Python迭代器与生成器用法实例分析
2018/07/09 Python
Python函数参数类型及排序原理总结
2019/12/19 Python
python 实现Requests发送带cookies的请求
2021/02/08 Python
Html5中的桌面通知Notification的实现
2018/09/25 HTML / CSS
美国床垫和床上用品公司:Nest Bedding
2017/06/12 全球购物
线程同步的方法
2016/11/23 面试题
网游商务专员求职信
2013/10/15 职场文书
2014年会演讲稿范文
2014/01/06 职场文书
国贸专业自荐信范文
2014/03/02 职场文书
征婚广告词
2014/03/17 职场文书
亲子阅读的活动方案
2014/08/15 职场文书
评先进个人材料
2014/12/29 职场文书
2015年父亲节活动总结
2015/02/12 职场文书
教师聘用意向书
2015/05/11 职场文书
2015年留守儿童工作总结
2015/05/22 职场文书
年会主持人开场白台词
2015/05/29 职场文书
宿舍管理制度范本
2015/08/07 职场文书
关于职业道德的心得体会
2016/01/18 职场文书
详解解Django 多对多表关系的三种创建方式
2021/08/23 Python