使用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 相关文章推荐
PHP5 安装方法
Oct 09 PHP
PHP 获取目录下的图片并随机显示的代码
Dec 28 PHP
在命令行下运行PHP脚本[带参数]的方法
Jan 22 PHP
php生成缩略图示例代码分享(使用gd库实现)
Jan 20 PHP
PHP读取文件内容后清空文件示例代码
Mar 18 PHP
php json_encode()函数返回json数据实例代码
Oct 10 PHP
PHP实现采集中国天气网未来7天天气
Oct 15 PHP
Codeigniter检测表单post数据的方法
Mar 21 PHP
实例讲解yii2.0在php命令行中运行的步骤
Dec 01 PHP
php正则提取html图片(img)src地址与任意属性的方法
Feb 08 PHP
使用tp框架和SQL语句查询数据表中的某字段包含某值
Oct 18 PHP
PHP设计模式之命令模式示例详解
Dec 20 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的sprintf函数的用法 控制浮点数格式
2014/02/14 PHP
用PHP来计算某个目录大小的方法
2014/04/01 PHP
php获取textarea的值并处理回车换行的方法
2014/10/20 PHP
php天翼开放平台短信发送接口实现方法
2014/12/22 PHP
基于PHP技术开发客服工单系统
2016/01/06 PHP
Yii统计不同类型邮箱数量的方法
2016/10/18 PHP
thinkphp 中的volist标签在ajax操作中的特殊性(推荐)
2018/01/15 PHP
PHP有序表查找之二分查找(折半查找)算法示例
2018/02/09 PHP
jquery map方法使用示例
2014/04/23 Javascript
Javascript玩转继承(二)
2014/05/08 Javascript
JS实现进入页面时渐变背景色的方法
2015/02/25 Javascript
jQuery原生的动画效果
2015/07/10 Javascript
jQuery实现的类似淘宝网站搜索框样式代码分享
2015/08/24 Javascript
jQuery mobile 移动web(4)
2015/12/20 Javascript
Jquery Easyui进度条组件Progress使用详解(8)
2020/03/26 Javascript
Vue2.0权限树组件实现代码
2017/08/29 Javascript
原生js封装运动框架的示例讲解
2017/10/01 Javascript
javascript创建元素和删除元素实例小结
2019/06/19 Javascript
Openlayers实现图形绘制
2020/09/28 Javascript
JS实现购物车基本功能
2020/11/08 Javascript
[46:20]TFT vs Secret Supermajor小组赛C组 BO3 第二场 6.3
2018/06/04 DOTA
python实现360皮肤按钮控件示例
2014/02/21 Python
Python中使用urllib2防止302跳转的代码例子
2014/07/07 Python
python生成随机图形验证码详解
2017/11/08 Python
python如何读写json数据
2018/03/21 Python
python numpy 显示图像阵列的实例
2018/07/02 Python
在Python 不同级目录之间模块的调用方法
2019/01/19 Python
python3用PIL把图片转换为RGB图片的实例
2019/07/04 Python
Pycharm使用之设置代码字体大小和颜色主题的教程
2019/07/12 Python
AURALog面试题软件测试方面
2013/10/22 面试题
区三好学生主要事迹
2014/01/30 职场文书
工作保证书范文
2014/04/29 职场文书
树转促学习心得体会
2014/09/10 职场文书
农业生产宣传标语
2014/10/08 职场文书
中考学习决心书
2015/02/04 职场文书
初中军训感想
2015/08/07 职场文书