php+html5使用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="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.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,//告诉jQuery不处理发送的数据

            contentType: false  //不用设置content-type请求头

        }).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对象提交表单及上传图片的方法的更多相关文章

  1. 如果没有<form>标签，也没有enctype="multipart/form-data"属性，怎么使用formData对象提交表单呢？如下方式

    form标签的enctype属性 enctype 属性规定在发送到服务器之前应该如何对表单数据进行编码. 默认地,表单数据会编码为 "application/x-www-form-urlen ...

  2. 利用JS提交表单的几种方法和验证(必看篇)

    第一种方式:表单提交,在form标签中增加onsubmit事件来判断表单提交是否成功 ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 <scr ...

  3. JSP提交表单的几种方法

    1.通过<form action="url"><input type="submit"></form>按钮方式提交 这种方式 ...

  4. Mvc 提交表单的4种方法全程详解

    一,MVC  HtmlHelper方法 Html.BeginForm(actionName,controllerName,method,htmlAttributes){} BeginRouteForm ...

  5. Mvc 提交表单的4种方法

     一,MVC  HtmlHelper方法 1.     Html.BeginForm(actionName,controllerName,method,htmlAttributes){} 2.     ...

  6. 利用JS提交表单的几种方法和验证

    第一种方式:表单提交,在form标签中增加onsubmit事件来判断表单提交是否成功 <script type="text/javascript"> function ...

  7. 使用JS对form的内容验证失败后阻止提交 &&js校验表单后提交表单的三种方法总结

    1.form的两个事件 submit,提交表单,如果直接调用该函数,则直接提交表单 onSubmit,提交按钮点击时先触发,然后触发submit事件.如果不加控制的话,默认返回true,因此表单总能提 ...

  8. spring mvc 防止重复提交表单的两种方法，推荐第二种

    第一种方法:判断session中保存的token 比较麻烦,每次在提交表单时都必须传入上次的token.而且当一个页面使用ajax时,多个表单提交就会有问题. 注解Token代码: package c ...

  9. ThinkPHP提交表单判断上传图片经验总结

    在用TP框架开发程序处理接收到的表单的时候,要判断<input type="file" name="img">是否有上传图片,来决定是否要将对应的图 ...

  10. 怎样使用FormData对象加工表单数据

    1. 获取表单(form)节点 2. 对FormData实例做相关操作 3. 发起HTTP请求 function sendForm(form) { var formData = new FormDat ...

随机推荐

  1. ZOJ 3537 Cake (凸包 + 区间DP && 最优三角形剖分)

    题目链接:Here 题意: 给定 \(n\)​​ 个点的坐标,先问这些点能否组成一个凸包,如是凸包,问用不相交的线来切这个凸包使得凸包只由三角形组成,根据 \(cost_{i, j} = |x_i + ...

  2. 厄拉多塞筛法的 Python 实现以及复杂度计算

    想要得到一个不大于N的数所有素数,可以先找到不超过根号N的所有素数,设2 = p1 < p2 < ......<pk ≤√N,然后在2,3,4......N里面进行下面的操作: 留下 ...

  3. 【SpringBoot】 启动后会调用执行的方法的 (五种方式)

    在 SpringBoot 工程 启动后, 会调用执行方法的五种方式: 亲自测试, 按照执行顺序如下: 第一种: @Component public class SpringContext1 { @Po ...

  4. 【iOS源码混淆工具】iOS代码混淆工具

    主要功能 Ipa Guard是一款功能强大的ipa混淆工具,不需要ios app源码,直接对ipa文件进行混淆加密.可对IOS ipa 文件的代码,代码库,资源文件等进行混淆保护. 可以根据设置对函数 ...

  5. 如何使用VNC进行远程桌面控制

    VNC是一款很实用的可以实现远程桌面控制的小工具,我遇到的有两种情况比较常见,一是有时候时候可能你会外出或离开自己办公室(但可以访问到办公司的网络),而很多资料都保存在办公室的台式机上,这时如果突然有 ...

  6. python常见面试题讲解（十一）字符串反转-五种解法

    题目描述 写出一个程序,接受一个字符串,然后输出该字符串反转后的字符串.(字符串长度不超过1000) 输入描述: 输入N个字符 输出描述: 输出该字符串反转后的字符串 示例1 输入 abcd 输出 d ...

  7. 基于AHB_BUS的eFlash控制器的架构设计

    eFlash控制器的架构设计 1.架构设计思路分析 1.1 含有的模块分析 eFlash控制器是一个基于AHB的slave,所以需要一个AHB_slave_if处理AHB的信号.AHB_slave_i ...

  8. [转帖]oracle 11.2.0.4 rac集群等待事件enq: TM - contention

    近期,一金融客户oracle 11.2.0.4 rac集群delete不当导致等待事件enq: TM - contention严重引起大范围会话堆积,记录的相关分析工作如下. 1.登录集群任意节点,查 ...

  9. [转帖]jmeter命令大全(命令行模式)

    jmeter命令 --? 打印命令行选项并退出 -h. --帮助 打印使用信息和退出 -v. --版本 打印版本信息并退出 -p. --propfile<argument> 要使用的jme ...

  10. [转帖]Kafka—配置SASL/PLAIN认证客户端及常用操作命令

    介绍   SASL/PLAIN 是一种简单的 username/password安全认证机制,本文主要总结服务端开启该认证后,命令行客户端进行配置的操作流程. 配置 增加jaas.properties ...