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部分常见问题总结
Mar 27 PHP
php flush类输出缓冲剖析
Oct 19 PHP
php去掉字符串的最后一个字符附substr()的用法
Mar 23 PHP
解析php mysql 事务处理回滚操作(附实例)
Aug 05 PHP
php使用curl打开https网站的方法
Jun 17 PHP
PHP实现的回溯算法示例
Aug 15 PHP
PHP实现模拟http请求的方法分析
Dec 20 PHP
php 替换文章中的图片路径,下载图片到本地服务器的方法
Feb 06 PHP
PHP中的自动加载操作实现方法详解
Aug 06 PHP
php依赖注入知识点详解
Sep 23 PHP
phpmyadmin在宝塔面板里进不去的解决方案
Jul 06 PHP
深入浅析安装PhpStorm并激活的步骤详解
Sep 17 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
怎样辨别一杯好咖啡
2021/03/03 新手入门
fleaphp常用方法分页之Pager使用方法
2011/04/23 PHP
用php制作简单分页(从数据库读取记录)的方法详解
2013/05/04 PHP
使用cookie实现统计访问者登陆次数
2013/06/08 PHP
深入file_get_contents函数抓取内容失败的原因分析
2013/06/25 PHP
ECMall支持SSL连接邮件服务器的配置方法详解
2014/05/19 PHP
php解析json数据实例
2014/08/19 PHP
原生JS实现Ajax通过GET方式与PHP进行交互操作示例
2018/05/12 PHP
Laravel 关联模型-关联新增和关联更新的方法
2019/10/10 PHP
Javascript 的addEventListener()及attachEvent()区别分析
2009/05/21 Javascript
js 复制或插入Html的实现方法小结
2010/05/19 Javascript
AeroWindow 基于JQuery的弹出窗口插件
2011/06/27 Javascript
纯js实现仿QQ邮箱弹出确认框
2015/04/29 Javascript
基于BootStrap Metronic开发框架经验小结【八】框架功能总体界面介绍
2016/05/12 Javascript
Google 地图API资料整理及详细介绍
2016/08/06 Javascript
JavaScript中防止微信浏览器被整体拖动的方法
2017/08/25 Javascript
nodejs实现简单的gulp打包
2017/12/21 NodeJs
浅谈PDF.js使用心得
2018/06/07 Javascript
vue+element实现打印页面功能
2019/05/20 Javascript
RxJS的入门指引和初步应用
2019/06/15 Javascript
Layui多选只有最后一个值的解决方法
2019/09/02 Javascript
layer.open的自适应及居中及子页面标题的修改方法
2019/09/05 Javascript
详解vue中v-bind:style效果的自定义指令
2020/01/21 Javascript
JavaScript实现横版菜单栏
2020/03/17 Javascript
[01:19:54]DOTA2上海特级锦标赛主赛事日 - 2 败者组第二轮#1Alliance VS EHOME
2016/03/03 DOTA
Python利用openpyxl库遍历Sheet的实例
2018/05/03 Python
在PyCharm环境中使用Jupyter Notebook的两种方法总结
2018/05/24 Python
Python终端输出彩色字符方法详解
2020/02/11 Python
python实现将range()函数生成的数字存储在一个列表中
2020/04/02 Python
详解CSS3中常用的样式【基本文本和字体样式】
2020/10/20 HTML / CSS
浅谈html5标签css3的常用样式
2016/10/20 HTML / CSS
船舶专业个人求职信范文
2014/01/02 职场文书
学校2015年纠风工作总结
2015/05/15 职场文书
个人销售励志奋斗口号
2019/12/05 职场文书
《LOL》“克隆大作战”久违归来 幻灵战队皮肤上线
2022/04/03 其他游戏
解决Git推送错误non-fast-forward的方法
2022/06/25 Servers