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 15 PHP
PHP类中Static方法效率测试代码
Oct 17 PHP
深入PHP autoload机制的详解
Jun 09 PHP
PHP 文件编程综合案例-文件上传的实现
Jul 03 PHP
PHP实现的一致性哈希算法完整实例
Nov 14 PHP
PHP5.5迭代生成器用法实例详解
Mar 16 PHP
关于PHP中Session文件过多的问题及session文件保存位置
Mar 17 PHP
php读取和保存base64编码的图片内容
Apr 22 PHP
php中isset与empty函数的困惑与用法分析
Jul 05 PHP
Laravel 简单实现Ajax滚动加载示例
Oct 22 PHP
php数组指针函数功能及用法示例
Feb 11 PHP
yii框架结合charjs实现统计30天数据的方法
Apr 04 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
探讨:array2xml和xml2array以及xml与array的互相转化
2013/06/24 PHP
PHP简单选择排序算法实例
2015/01/26 PHP
基于GD2图形库的PHP生成图片缩略图类代码分享
2015/02/08 PHP
php中使用key,value,current,next和prev函数遍历数组的方法
2015/03/17 PHP
php文件上传你必须知道的几点
2015/10/20 PHP
Javascript代码混淆综合解决方案-Javascript在线混淆器
2006/12/18 Javascript
一些实用的jQuery代码片段收集
2011/07/12 Javascript
node.js中的fs.lchmodSync方法使用说明
2014/12/16 Javascript
JavaScript原生对象之Date对象的属性和方法详解
2015/03/13 Javascript
使用Chart.js图表库制作漂亮的响应式表单
2015/10/28 Javascript
瀑布流的实现方式(原生js+jquery+css3)
2020/06/28 Javascript
jQuery实现CheckBox全选、全不选功能
2017/01/11 Javascript
Bootstrap笔记之缩略图、警告框实例详解
2017/03/09 Javascript
layui文件上传实现代码
2017/05/20 Javascript
深入理解Angular4订阅(Subscribe)与取消
2017/11/22 Javascript
使用vue-aplayer插件时出现的问题的解决
2018/03/02 Javascript
Vue中v-for的数据分组实例
2018/03/07 Javascript
vue指令之表单控件绑定v-model v-model与v-bind结合使用
2019/04/17 Javascript
python机器学习案例教程——K最近邻算法的实现
2017/12/28 Python
Python RabbitMQ消息队列实现rpc
2018/05/30 Python
python交换两个变量的值方法
2019/01/12 Python
pandas去除重复列的实现方法
2019/01/29 Python
Python实现 PS 图像调整中的亮度调整
2019/06/28 Python
Gap加拿大官网:Gap Canada
2017/08/24 全球购物
彼得罗夫美国官网:Peter Thomas Roth美国(青瓜面膜)
2017/11/05 全球购物
包装类的功能、种类、常用方法
2012/01/27 面试题
高中生毕业学习总结的自我评价
2013/11/14 职场文书
一年级班主任寄语
2014/01/19 职场文书
大学生活自我评价
2014/04/09 职场文书
学习雷锋倡议书
2014/04/15 职场文书
啦啦队口号大全
2014/06/16 职场文书
2014年党务公开工作总结
2014/12/09 职场文书
感恩教师节主题班会
2015/08/12 职场文书
Python如何解决secure_filename对中文不支持问题
2021/07/16 Python
AJAX引擎原理以及XmlHttpRequest对象的axios、fetch区别详解
2022/04/09 Javascript
win10蓝屏0xc0000001安全模式进不了怎么办?win10出现0xc0000001的解决方法
2022/08/05 数码科技