使用FormData对象提交表单及上传图片

2023-05-16

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="//code.jquery.com/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" οnclick="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);
?>


本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

使用FormData对象提交表单及上传图片 的相关文章

  • php 生成短网址

    php 生成短网址 原理 xff1a 1 将原网址做crc32校验 xff0c 得到校验码 2 使用sprintf 39 u 39 将校验码转为无符号数字 3 对无符号数字进行求余62操作 xff08 大小写字母 43 数字等于62位 xf
  • debian7安装和配置小经验

    好久没碰linux了 xff0c 这回 捡 了台电脑测试玩 xff0c 发现过去的基本都忘记了 xff0c 拳不离手 曲不离口 xff0c 古人诚吾不欺 linux版本选择我比较熟悉debian xff0c 因为debian装包好方便 xf
  • ApacheBench 测试性能并使用GnuPlot绘制图表

    Apache Bench 是web性能测试工具 xff0c 功能强大 但输出的结果只是数字形式 xff0c 不容易看到数据的变化 因此 xff0c GnuPlot 的强大绘制功能正好可以弥补Apache Bench这方面的不足 关于Apac
  • VM ubuntu ping unknow host 解决方法

    例如网关地址为 xff1a 192 168 1 1 route add default gw 192 168 1 1 sudo vim etc resolv conf 在 etc resolv conf 中加入 Generated by N
  • apache日志分析及系统cpu,内存,负载情况监控

    1 根据Apache Log xff0c 获取当天秒并发数最多的记录 tail 10000 demo fdipzone com access log 2014 01 16 01 cut d 34 34 f 2 awk 39 print 1
  • Apache 搭建HTTPS Virtual Host

    Apache 搭建HTTPS Virtual Host 1 创建SSL证书 首先需要安装openssl xff0c linux系统默认已安装 xff0c 如没有则用以下命令安装 xff1a sudo apt get install open
  • MongoDB 主从同步设置

    MongoDB 主从同步设置 关于MongoDB的安装及启动参数说明可以参考我之前转载的 Ubuntu安装MongoDB 与 Mongodb启动命令mongod参数说明 主从设置 Master xff1a 192 168 111 103 P
  • php Timer 页面运行时间监测类

    php Timer 页面运行时间监测类 xff0c 可按不同key监测不同的运行时间 Timer class php lt php Timer class 计算页面运行时间 可按不同key计算不同的运行时间 Date 2014 02 28
  • C 使用异或(xor)加密/解密文件

    C 使用异或 XOR 加密 解密文件 之前写过一篇 php 使用异或 xff08 XOR xff09 加密 解密文件 xff0c 但php执行的速度很慢 xff0c 因此这次使用C重写 xff0c 速度有很大的提高 xor encrypt
  • 使用C创建php扩展

    使用C创建php扩展 优点 xff1a 1 提高运行效率 2 降低php复杂度 xff0c 可以直接调用扩展方法实现功能 3 方便与第三方库交互 缺点 xff1a 1 开发比php复杂 2 可维护性降低 3 开发周期变长 php开发 xff
  • linux 系统监控命令

    linux系统监控有以下命令 xff1a uptime xff1a 显示系统负载情况 mpstat xff1a 显示 CPU 性能 free xff1a 显示内存使用情况 vmstat xff1a 显示虚拟内存使用情况 iostat xff
  • php 构造函数支持不同个数参数的方法

    php 构造函数支持不同个数参数方法 原理 xff1a 在 construct中使用 func num args 获取参数个数 xff0c 再根据参数个数执行不同的调用 参数值使用func get arg 方法获得 demo xff1a l
  • A+B for Polynomials(c++)

    题目描述 xff1a This time you are supposed to find A 43 B where A and B are two polynomials 输入描述 xff1a Each input file contai
  • php soap 使用实例

    SOAP 是基于XML和HTTP通讯协议 xff0c XML各个平台 xff0c 各种语言都支持的一种语言 WSDL 是网络服务描述语言 xff08 Web Services Description Language xff09 xff0c
  • 使用PDO查询mysql避免SQL注入

    使用传统的 mysql connect mysql query方法来连接查询数据库时 xff0c 如果过滤不严紧 xff0c 就有SQL注入风险 虽然可以用mysql real escape string 函数过滤用户提交的值 xff0c
  • linux crontab 实现每秒执行

    linux crontab 命令 xff0c 最小的执行时间是一分钟 如需要在小于一分钟内重复执行 xff0c 可以有两个方法实现 1 使用延时来实现每N秒执行 创建一个php做执行动作 xff0c 非常简单 xff0c 就是把当前时间写入
  • ssh远程执行命令并自动退出

    ssh命令格式如下 xff1a usage ssh 1246AaCfgKkMNnqsTtVvXxYy b bind address c cipher spec D bind address port e escape char F conf
  • shell 监控cpu,memory,load average

    shell 监控cpu xff0c memory xff0c load average xff0c 记录到log xff0c 当负载压力时 xff0c 发电邮通知管理员 原理 xff1a 1 获取cpu xff0c memory xff0c
  • shell date 命令说明

    shell date 命令说明 用法 xff1a date 选项 43 格式 或 xff1a date u utc universal MMDDhhmm CC YY ss 以给定的格式显示当前时间 xff0c 或是设置系统日期 d date
  • shell 生成指定范围随机数与随机字符串

    shell 生成指定范围随机数与随机字符串 1 使用系统的 RANDOM 变量 fdipzone 64 ubuntu echo RANDOM 17617 RANDOM 的范围是 0 32767 如需要生成超过32767的随机数 xff0c

随机推荐

  • php 双向队列类

    xff08 deque xff0c 全名double ended queue xff09 是一种具有队列和栈的性质的数据结构 双向队列中的元素可以从两端弹出 xff0c 其限定插入和删除操作在表的两端进行 在实际使用中 xff0c 还可以有
  • php heredoc 与 nowdoc

    php heredoc 与 nowdoc heredoc 结构 heredoc 句法结构 xff1a lt lt lt 在该运算符之后要提供一个标识符 xff0c 然后换行 接下来是字符串本身 xff0c 最后要用前面定义的标识符作为结束标
  • HTML5 localStorage and sessionStorage

    HTML5 提供两种web存储方法 xff0c localStorage 与 sessionStorage localStorage 与 sessionStorage 区别 localStorage没有过期时间 xff0c 只要不clear
  • AZ_自定义不等高的cell

    自定义不等高的cell 1 给模型增加frame数据 纯代码 让ViewController继承UITableViewController xff0c 移除storyboard中的ViewController xff0c 新建一个UITab
  • php 导出CSV抽象类

    php 导出CSV抽象类 xff0c 根据总记录数与每批次记录数 xff0c 计算总批次 xff0c 循环导出 避免内存不足的问题 ExportCSV class php lt php php Export CSV abstract cla
  • php zip文件内容比较类

    php zip 文件比较类 xff0c 比较两个zip文件的内容 xff0c 返回新增 xff0c 删除 xff0c 及相同的文件列表 暂时只支持单层 需求 xff1a 上传一个zip文件 xff0c zip内有很多图片文件 需要对图片文件
  • php 获取/设置用户访问页面语言类

    User Language Class 获取 设置用户访问的页面语言 xff0c 如果用户没有设置访问语言 xff0c 则读取Accept Language 根据用户选择的语言显示对应的页面 xff08 英文 xff0c 简体中文 xff0
  • php session 读写锁

    php session 读写锁 先看一个例子 xff0c 功能 xff1a 1 点击页面中一个按钮 xff0c ajax执行php xff0c php中用session记录执行到哪一步 2 使用ajax轮询另一个php xff0c 获取se
  • linux 打开文件数 too many open files 解决方法

    linux 打开文件数 too many open files 解决方法 too many open files 出现这句提示的原因是程序打开的文件 socket连接数量超过系统设定值 查看每个用户最大允许打开文件数量 ulimit a f
  • php 求水仙花数优化

    水仙花数是指一个n位数 n gt 61 3 xff0c 它每个位上数字的n次幂之和等于它本身 xff0c n为它的位数 xff08 例如 xff1a 1 3 43 5 3 43 3 3 61 153 水仙花数又称阿姆斯特朗数 三位的水仙花数
  • php 验证身份证号码

    身份证号码的结构 身份证号码是特征组合码 xff0c 由17位数字本体码和一位校验码组成 排列顺序从左至右依此为 xff1a 六位数字地址码 xff0c 八位数字出生日期码 xff0c 三位数字顺序码和一位数字校验码 地址码 xff08 前
  • php 删除空目录及空子目录

    php 删除空目录及空子目录 步骤 xff1a 1 遍历目录及子目录 2 使用 scandir 判断目录是否为空 xff0c 为空则使用rmdir 删除 lt php 删除所有空目录 64 param String path 目录路径 fu
  • linux 分卷压缩命令

    linux 分卷压缩命令 1 使用tar分卷压缩 格式 tar cvzf filedir split d b 50m filename 例子 xff1a tar cvzf picture split d b 10m picture 将 pi
  • 使用html5 FileReader获取图片,并异步上传到服务器(不使用iframe)

    使用html5 FileReader获取图片 xff0c 并异步上传到服务器 不使用iframe 原理 xff1a 1 使用FileReader 读取图片的base64编码 2 使用ajax xff0c 把图片的base64编码post到服
  • C语言 赶鸭子题 (用递归写)

    用递归写 赶鸭子题 题目 一个人赶着鸭子去每个村庄卖 xff0c 每经过一个村子卖去所赶鸭子的 61 61 一半又一只 61 61 这样他经过了 61 61 七个村子 61 61 后还剩两只鸭子 xff0c 问他出发时共赶多少只鸭子 xff
  • php unserialize 返回false的解决方法

    php unserialize 返回false的解决方法 php 提供serialize 序列化 与unserialize 反序列化 方法 使用serialize序列化后 xff0c 再使用unserialize反序列化就可以获取原来的数据
  • linux使用flock文件锁解决crontab冲突问题

    linux的crontab命令 xff0c 可以定时执行操作 xff0c 最小周期是每分钟执行一次 关于crontab实现每秒执行可参考我之前的文章 linux crontab 实现每秒执行 现在有个问题 xff0c 如果设定了任务每分钟执
  • php 根据字符串生成对应数组方法

    php 根据字符串生成对应数组方法 例如 xff1a lt php config 61 array 39 project page index 39 61 gt 39 content 39 39 project page nav 39 61
  • facebook comments plugins 介绍

    facebook comments plugins 介绍 首先 xff0c 需要在facebook创建一个APP xff0c 创建方法见https developers facebook com xff0c APP有一项是填写Domain的
  • 使用FormData对象提交表单及上传图片

    FormData 对象 xff0c 可以把form中所有表单元素的name与value组成一个queryString xff0c 提交到后台 在使用Ajax提交时 xff0c 使用FormData对象可以减少拼接queryString的工作