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 组件化编程技巧
Jun 06 PHP
php UTF-8、Unicode和BOM问题
May 18 PHP
关于php mvc开发模式的感想
Jun 28 PHP
php 函数中使用static的说明
Jun 01 PHP
YII路径的用法总结
Jul 09 PHP
php之curl实现http与https请求的方法
Oct 21 PHP
四种php中webservice实现的简单架构方法及实例
Feb 03 PHP
PHP实现冒泡排序的简单实例
May 26 PHP
详解PHP中cookie和session的区别及cookie和session用法小结
Jun 12 PHP
php操作xml并将其插入数据库的实现方法
Sep 08 PHP
PHP开发之归档格式phar文件概念与用法详解【创建,使用,解包还原提取】
Nov 17 PHP
PHP8.0新功能之Match表达式的使用
Jul 19 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
现磨咖啡骗局!现磨咖啡=新鲜咖啡?现磨咖啡背后的猫腻你不懂!
2019/03/28 冲泡冲煮
php实现的MySQL通用查询程序
2007/03/11 PHP
PHP的开发框架的现状和展望
2007/03/16 PHP
去除php注释和去除空格函数分享
2014/03/13 PHP
PHP资源管理框架Assetic简介
2014/06/12 PHP
tp5.1 框架数据库高级查询技巧实例总结
2020/05/25 PHP
PHP7 新增常量
2021/03/09 PHP
jQuery 行级解析读取XML文件(附源码)
2009/10/12 Javascript
JS 树形递归实例代码
2010/05/18 Javascript
JavaScript 布尔操作符解析  &amp;&amp; || !
2012/08/10 Javascript
jQuery中map()方法用法实例
2015/01/06 Javascript
JavaScript从数组中删除指定值元素的方法
2015/03/18 Javascript
jquery实现鼠标拖拽滑动效果来选择数字的方法
2015/05/04 Javascript
jquery转盘抽奖功能实现
2015/11/13 Javascript
BootStrap学习系列之Bootstrap Typeahead 组件实现百度下拉效果(续)
2016/07/07 Javascript
利用JS实现简单的瀑布流加载图片效果
2017/04/22 Javascript
详解webpack分包及异步加载套路
2017/06/29 Javascript
JS 封装父页面子页面交互接口的实例代码
2019/06/25 Javascript
js实现图片上传到服务器和回显
2020/01/19 Javascript
nodejs实现百度舆情接口应用示例
2020/02/07 NodeJs
可拖拽组件slider.js使用方法详解
2020/12/04 Javascript
Python实现的tab文件操作类分享
2014/11/20 Python
python实现简单的计时器功能函数
2015/03/14 Python
django实现更改数据库某个字段以及字段段内数据
2020/03/31 Python
python 下载m3u8视频的示例代码
2020/11/11 Python
css3选择器基本介绍
2014/12/15 HTML / CSS
HTML5之SVG 2D入门6—视窗坐标系与用户坐标系及变换概述
2013/01/30 HTML / CSS
中专毕业生求职简历的自我评价
2013/10/21 职场文书
环境工程专业个人求职信
2013/12/05 职场文书
销售总监岗位职责
2014/01/04 职场文书
领导班子遵守党的政治纪律情况对照检查材料
2014/09/26 职场文书
教师自我剖析材料(群众路线)
2014/09/29 职场文书
2014年组织部工作总结
2014/11/14 职场文书
刑事上诉状范文
2015/05/22 职场文书
整理Python中常用的conda命令操作
2021/06/15 Python
Vue.js中v-bind指令的用法介绍
2022/03/13 Vue.js