使用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仿ZOL分页类代码
Oct 02 PHP
php print EOF实现方法
May 21 PHP
php用数组返回无限分类的列表数据的代码
Aug 08 PHP
《PHP编程最快明白》第五讲:php目录、文件操作
Nov 01 PHP
php模板中出现空行解决方法
Mar 08 PHP
php入门学习知识点三 PHP上传
Jul 14 PHP
php curl基本操作详解
Jul 23 PHP
PHP扩展CURL的用法详解
Jun 20 PHP
Codeigniter的dom类用法实例
Jun 26 PHP
php文件缓存方法总结
Mar 16 PHP
PHP读取mssql json数据中文乱码的解决办法
Apr 11 PHP
php图像验证码生成代码
Jun 08 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
国内咖啡文化
2021/03/03 咖啡文化
PHP 截取字符串 分别适合GB2312和UTF8编码情况
2009/02/12 PHP
php 函数中使用static的说明
2012/06/01 PHP
php+mysqli实现批量替换数据库表前缀的方法
2014/12/29 PHP
在WordPress中使用PHP脚本来判断访客来自什么国家
2015/12/10 PHP
Yii快速入门经典教程
2015/12/28 PHP
支付宝服务窗API接口开发php版本
2016/07/20 PHP
PHP unset函数原理及使用方法解析
2020/08/14 PHP
jQuery模拟超链接点击效果代码
2013/04/21 Javascript
jquery div拖动效果示例代码
2013/12/08 Javascript
原生js获取宽高与jquery获取宽高的方法关系对比
2014/04/04 Javascript
JS点击链接后慢慢展开隐藏着图片的方法
2015/02/17 Javascript
js正则匹配出所有图片及图片地址src的方法
2015/06/08 Javascript
Javascript如何判断数据类型和数组类型
2016/06/22 Javascript
Javascript typeof与instanceof的区别
2016/10/18 Javascript
微信小程序搜索组件wxSearch实例详解
2017/06/08 Javascript
Vue实现路由跳转和嵌套
2017/06/20 Javascript
vue中各选项及钩子函数执行顺序详解
2018/08/25 Javascript
基于vue开发微信小程序mpvue-docs跳转页面功能
2019/04/10 Javascript
JavaScript JSON数据处理全集(小结)
2019/08/15 Javascript
python解析html开发库pyquery使用方法
2014/02/07 Python
win7 下搭建sublime的python开发环境的配置方法
2014/06/18 Python
python格式化字符串实例总结
2014/09/28 Python
python下读取公私钥做加解密实例详解
2017/03/29 Python
pycharm设置鼠标悬停查看方法设置
2019/07/29 Python
PyTorch中Tensor的拼接与拆分的实现
2019/08/18 Python
PyQt5多线程防卡死和多窗口用法的实现
2020/09/15 Python
HTML5的结构和语义(2):结构
2008/10/17 HTML / CSS
捷克体育用品购物网站:D-sport
2017/12/28 全球购物
光声世纪笔试题目
2012/08/25 面试题
什么是.net
2015/08/03 面试题
酒店销售经理岗位职责
2014/01/31 职场文书
消费者理赔投诉书
2015/07/02 职场文书
python爬不同图片分别保存在不同文件夹中的实现
2021/04/02 Python
python实现三阶魔方还原的示例代码
2021/04/28 Python
手把手教你使用TensorFlow2实现RNN
2021/07/15 Python