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

 更新时间:2015年02月11日 11:35:42   作者:傲雪星枫  
这篇文章主要介绍了php+html5使用FormData对象提交表单及上传图片的方法,实例分析了FormData对象的使用技巧,非常具有实用价值,需要的朋友可以参考下

本文实例讲述了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程序设计有所帮助。

相关文章

  • PHP实现求两个字符串最长公共子串的方法示例

    PHP实现求两个字符串最长公共子串的方法示例

    这篇文章主要介绍了PHP实现求两个字符串最长公共子串的方法,涉及php字符串与数组的遍历、运算、判断等相关操作技巧,需要的朋友可以参考下
    2017-11-11
  • php面试实现反射注入的详细方法

    php面试实现反射注入的详细方法

    在本篇文章里小编给大家整理了关于php面试怎么实现反射注入的相关知识点,需要的朋友们学习下。
    2019-09-09
  • php构造方法中析构方法在继承中的表现

    php构造方法中析构方法在继承中的表现

    这篇文章主要为大家详细介绍了php构造方法中析构方法在继承中的表现,感兴趣的小伙伴们可以参考一下
    2016-04-04
  • PHP中防止SQL注入方法详解

    PHP中防止SQL注入方法详解

    这篇文章主要介绍了PHP中防止SQL注入方法详解,需要的朋友可以参考下
    2014-12-12
  • 一个PHP验证码类代码分享(已封装成类)

    一个PHP验证码类代码分享(已封装成类)

    验证码的用途就不用多说了,之前也写了一篇关于PHP验证码的文章,PHP 验证码的实现。但是没有封装成类。下面就介绍一个PHP的一个验证码类。
    2011-07-07
  • PHP MSSQL 分页实例

    PHP MSSQL 分页实例

    这篇文章主要介绍了PHP MSSQL可刷新分页实例,以及PHP+MSSQL通用分页公式,感兴趣的小伙伴们可以参考一下
    2016-04-04
  • PHP版自动生成文章摘要

    PHP版自动生成文章摘要

    现内容:截断一段含有HTML代码的文本,但是不会出现围堵标记没有封闭的问题。说明:这是PHP版的,用于在服务器端使用,如果你需要一个客户端版的,请阅读
    2008-07-07
  • PHP使用preg_split和explode分割textarea存放内容的方法分析

    PHP使用preg_split和explode分割textarea存放内容的方法分析

    这篇文章主要介绍了PHP使用preg_split和explode分割textarea存放内容的方法,结合实例形式分析preg_split和explode函数的功能、使用技巧与文本字符串分割过程中的相关注意事项,需要的朋友可以参考下
    2017-07-07
  • PHP 变量定义和变量替换的方法

    PHP 变量定义和变量替换的方法

    当用双引号或heredoc定义字符串直接量时,字符串服从变量替换(variable interpolation)规则。替换即在字符串中用变量的值来替换变量名,也就是说在字符串中会自动进行变量解析。
    2009-07-07
  • ThinkPHP6使用JWT+中间件实现Token验证实例详解

    ThinkPHP6使用JWT+中间件实现Token验证实例详解

    这篇文章主要介绍了ThinkPHP6使用JWT+中间件实现Token验证的方法,结合实例形式详细分析了JWT的功能、原理及token验证相关操作技巧,需要的朋友可以参考下
    2023-06-06

最新评论