php+html5使用FormData对象提交表单及上传图片的方法


Posted in PHP onFebruary 11, 2015

本文实例讲述了php+html5使用FormData对象提交表单及上传图片的方法。分享给大家供大家参考。具体分析如下:

FormData 对象,可以把form中所有表单元素的name与value组成一个queryString,提交到后台。在使用Ajax提交时,使用FormData对象可以减少拼接queryString的工作量。

使用FormData对象

1.创建一个FormData空对象,然后使用append方法添加key/value

var formdata = new FormData();  

formdata.append('name','fdipzone');  

formdata.append('gender','male');

2.取得form对象,作为参数传入到FormData对象

<form name="form1" id="form1">  

<input type="text" name="name" value="fdipzone">  

<input type="text" name="gender" value="male">  

</form>

var form = document.getElementById('form1');  

var formdata = new FormData(form);

使用FormData提交表单及上传文件:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">  

<html>  

 <head>  

  <meta http-equiv="content-type" content="text/html; charset=utf-8">  

  <title> FormData Demo </title>  

  <script src="/js/jquery-1.11.0.min.js"></script>  

  <script type="text/javascript">  

  <!--  

    function fsubmit(){  

        var data = new FormData($('#form1')[0]);  

        $.ajax({  

            url: 'server.php',  

            type: 'POST',  

            data: data,  

            dataType: 'JSON',  

            cache: false,  

            processData: false,  

            contentType: false  

        }).done(function(ret){  

            if(ret['isSuccess']){  

                var result = '';  

                result += 'name=' + ret['name'] + '<br>';  

                result += 'gender=' + ret['gender'] + '<br>';  

                result += '<img src="' + ret['photo']  + '" width="100">';  

                $('#result').html(result);  

            }else{  

                alert('提交失??);  

            }  

        });  

        return false;  

    }  

  -->  

  </script>  

 </head>  

 <body>  

    <form name="form1" id="form1">  

        <p>name:<input type="text" name="name" ></p>  

        <p>gender:<input type="radio" name="gender" value="1">male <input type="radio" name="gender" value="2">female</p>  

        <p>photo:<input type="file" name="photo" id="photo"></p>  

        <p><input type="button" name="b1" value="submit" onclick="fsubmit()"></p>  

    </form>  

    <div id="result"></div>  

 </body>  

</html>

server.php如下:

<?php  

$name = isset($_POST['name'])? $_POST['name'] : '';  

$gender = isset($_POST['gender'])? $_POST['gender'] : '';  

$filename = time().substr($_FILES['photo']['name'], strrpos($_FILES['photo']['name'],'.'));  

$response = array();  

if(move_uploaded_file($_FILES['photo']['tmp_name'], $filename)){  

    $response['isSuccess'] = true;  

    $response['name'] = $name;  

    $response['gender'] = $gender;  

    $response['photo'] = $filename;  

}else{  

    $response['isSuccess'] = false;  

}  

echo json_encode($response);  

?>

运行效果如下图所示:

php+html5使用FormData对象提交表单及上传图片的方法

希望本文所述对大家的php程序设计有所帮助。

PHP 相关文章推荐
php google或baidu分页代码
Nov 26 PHP
php分页思路以及在ZF中的使用
May 30 PHP
PHP错误Parse error: syntax error, unexpected end of file in test.php on line 12解决方法
Jun 23 PHP
destoon实现资讯信息前面调用它所属分类的方法
Jul 15 PHP
PHP实现视频文件上传完整实例
Aug 28 PHP
php广告加载类用法实例
Sep 23 PHP
Yii中CArrayDataProvider和CActiveDataProvider区别实例分析
Mar 02 PHP
php 实现一个字符串加密解密的函数实例代码
Nov 01 PHP
PHP符合PSR编程规范的实例分享
Dec 21 PHP
Yii 2.0实现联表查询加搜索分页的方法示例
Aug 02 PHP
PHP基于DateTime类解决Unix时间戳与日期互转问题【针对1970年前及2038年后时间戳】
Jun 13 PHP
PHP连接SQL Server的方法分析【基于thinkPHP5.1框架】
May 06 PHP
php判断并删除空目录及空子目录的方法
Feb 11 #PHP
php获取YouTube视频信息的方法
Feb 11 #PHP
php实现图片局部打马赛克的方法
Feb 11 #PHP
php实现获取文件mime类型的方法
Feb 11 #PHP
php强制更新图片缓存的方法
Feb 11 #PHP
Laravel中使用自己编写类库的3种方法
Feb 10 #PHP
Laravel中使用阿里云OSS Composer包分享
Feb 10 #PHP
You might like
PHP设计聊天室步步通
2006/10/09 PHP
php 生成唯一id的几种解决方法
2013/03/08 PHP
分享常见的几种页面静态化的方法
2015/01/08 PHP
php版微信公众平台入门教程之开发者认证的方法
2016/09/26 PHP
自制PHP框架之路由与控制器
2017/05/07 PHP
解决php 处理 form 表单提交多个 name 属性值相同的 input 标签问题
2017/05/11 PHP
Thinkphp框架使用list_to_tree 实现无限级分类列出所有节点示例
2020/04/04 PHP
使用jquery prev()方法找到同级的前一个元素
2014/07/11 Javascript
innerHTML动态添加html代码和脚本兼容多个浏览器
2014/10/11 Javascript
微信小程序 标签传入数据
2017/05/08 Javascript
nodejs接入阿里大鱼短信验证码的方法
2017/07/10 NodeJs
canvas绘制爱心的几种方法总结(推荐)
2017/10/31 Javascript
完美解决axios在ie下的兼容性问题
2018/03/05 Javascript
JavaScript常用数学函数用法示例
2018/05/14 Javascript
NodeJS如何实现同步的方法示例
2018/08/24 NodeJs
layui 动态设置checbox 选中状态的例子
2019/09/02 Javascript
vue实现商品列表的添加删除实例讲解
2020/05/14 Javascript
[40:03]RNG vs VG 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/17 DOTA
Python实现优先级队列结构的方法详解
2016/06/02 Python
Python的装饰器用法学习笔记
2016/06/24 Python
Python实现基本数据结构中队列的操作方法示例
2017/12/04 Python
将string类型的数据类型转换为spark rdd时报错的解决方法
2019/02/18 Python
windows下安装Python虚拟环境virtualenvwrapper-win
2019/06/14 Python
pygame库实现移动底座弹球小游戏
2020/04/14 Python
Python的Django框架实现数据库查询(不返回QuerySet的方法)
2020/05/19 Python
在python3.64中安装pyinstaller库的方法步骤
2020/06/02 Python
在HTML5中使用MathML数学公式的简单讲解
2016/02/19 HTML / CSS
世界上最大的各式箱包网络零售店:eBag
2016/07/21 全球购物
雅诗兰黛(Estee Lauder)英国官方网站:世界顶级化妆品牌
2016/12/29 全球购物
大学考试作弊检讨书
2014/01/30 职场文书
产品开发计划书
2014/04/27 职场文书
篮球比赛口号
2014/06/10 职场文书
2014年社区重阳节活动策划方案
2014/09/16 职场文书
党的群众路线教育实践活动总结大会主持词
2014/10/30 职场文书
2015学校年度工作总结
2015/05/11 职场文书
餐厅如何利用“营销策略”扭转亏本局面
2019/10/15 职场文书