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="/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程序设计有所帮助。

赞 (0)

相关推荐

  • 美图秀秀web开放平台--PHP流式上传和表单上传示例分享

    废话少说,直接上代码: <?php /** * Note:for octet-stream upload * 这个是流式上传PHP文件 * Please be amended accordingly based on the actual situation */ $post_input = 'php://input'; $save_path = dirname(__FILE__); $postdata = file_get_contents($post_input); if (isset($p

  • PHP中上传多个文件的表单设计例子

    多个文件上传和单独文件上传的处理方式是一样的,只需要在客户端多提供几个类型为"file"的输入表单,并指定不同的"name"属性值.例如,在下面的代码中,可以让用户同时选择三个本地文件一起上传给服务器,客户端的表单如下所示: 复制代码 代码如下: <html> <head><title>多个文件上传表单</title></head> <body> <form action="mu

  • php文件上传表单摘自drupal的代码

    drupal文件上传表单的例子 复制代码 代码如下: function upload_form() { $form = array(); // If this #attribute is not present, upload will fail on submit $form['#attributes']['enctype'] = 'multipart/form-data'; $form['file_upload'] = array( '#title' => t('Upload file'),

  • php利用fsockopen GET/POST提交表单及上传文件

    php利用fsockopen GET/POST提交表单及上传文件,具体内容如下 1.GET get.php <?php $host = 'demo.fdipzone.com'; $port = 80; $errno = ''; $errstr = ''; $timeout = 30; $url = '/socket/getapi.php'; $param = array( 'name' => 'fdipzone', 'gender' => 'man' ); $url = $url.'?'

  • php表单文件iframe异步上传实例讲解

    php表单文件iframe异步上传实例讲解

    本文实例为大家分享了php表单文件iframe异步上传的具体代码,供大家参考,具体内容如下 1.表单中放置iframe元素: 2.文件上传控件内容变化的时候触发JS设置表单的action为处理文件上传的img_upload_process.php文件,并且将表单的target设置为iframe,让iframe去提交到服务器进行文件上传: 3.img_upload_process.php中处理文件上传成功后,将上传成功保存的文件路径回传给表单中隐藏域: 4.点击表单提交按钮的时,JS设置表单act

  • php上传图片获取路径及给表单字段赋值的方法

    本文实例讲述了php上传图片获取路径及给表单字段赋值的方法.分享给大家供大家参考,具体如下: 1. 调用方法例子: 大图路径: <input type="text" name="bigImageURL" id="bigImageURL" value=""> <iframe src="uppic.php?id=bigImageURL" width="600" height

  • thinkphp表单上传文件并将文件路径保存到数据库中

    thinkphp表单上传文件并将文件路径保存到数据库中

    上传单个文件,此文以上传图片为例,上传效果如图所示 创建数据库upload_img,用于保存上传路径 CREATE TABLE `seminar_upload_img` ( `id` int(11) NOT NULL AUTO_INCREMENT, `img_name` varchar(255) DEFAULT NULL COMMENT '图片名称', `img_url` varchar(255) DEFAULT NULL COMMENT '图片路径', `create_time` text,

  • php中关于普通表单多文件上传的处理方法

    然而有些情况只需要传递几个文件,而且文件体积并不太大,这种情况下使用组件则有点牛刀杀鸡的感觉,通过html自带的<input type="file">表单就可以实现需要的功能,关键在于后台接收程序的处理. php处理上传做的很方便,上传文件的信息通过服务器自动处理到$_FILES数组中,开发者只需要使用的内置处理函数简单操作就可以啦.ASP开发者则没有这么幸运,官方并没有提供直接的处理方法,需要开发者自己设计,这时就需要开发者了解IIS对enctype="mult

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

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

    本文实例讲述了php+html5使用FormData对象提交表单及上传图片的方法.分享给大家供大家参考.具体分析如下: FormData 对象,可以把form中所有表单元素的name与value组成一个queryString,提交到后台.在使用Ajax提交时,使用FormData对象可以减少拼接queryString的工作量. 使用FormData对象 1.创建一个FormData空对象,然后使用append方法添加key/value 复制代码 代码如下: var formdata = new

  • PHP使用HTML5 FormData对象提交表单操作示例

    PHP使用HTML5 FormData对象提交表单操作示例

    本文实例讲述了PHP使用HTML5 FormData对象提交表单操作.分享给大家供大家参考,具体如下: 这是HTML5中新增的一个Api,他能以表单对象作为参数,自动的把表单的数据打包,当ajax发送数据时,发送这个FormData对象,以达到发送表单数据的目的. 创建: 参数是一个form节点对象 var fm = document.getElementById('formid'); var fd = new FormData(fm); 优点: (1)在以往的ajax做post请求时,当提交的

  • jquery实现ajax提交表单信息的简单方法(推荐)

    最近在思考优化项目,想自己扩展一个jquery自动获取表单中的数据进行ajax提交.本人没有完整性学习jquery,基本上是现学现找,有点困难. 主要是扩展和拼接json转对象 很简单,附上代码: ; (function ($) { $.fn.ajaxForm = function (options) { var defaults = { modelname: 'model',//后台对象接收名称 url: '/',//提交地址 postType: 'POST',//提交方式 dataType:

  • Mvc提交表单的四种方法全程详解

    一,MVC HtmlHelper方法 1. Html.BeginForm(actionName,controllerName,method,htmlAttributes){} 2. BeginRouteForm 方法 (HtmlHelper, String, Object, FormMethod) 二,传统Form表单Aciton属性提交 三,Jquery+Ajax 提交表单 四,MVC Controller控制器和表单参数传递 MVC HtmlHelper方法 一,Html.BeginForm

  • js和jq使用submit方法无法提交表单的快速解决方法

    js和jq使用submit方法无法提交表单的快速解决方法

    昨天,在做一个表单异步提交内容的时候,遇到很奇怪的问题,submit()方法无法进行提交,每次提交都是把 当前给刷新了,网络抓包发现,每次都是 get方式去获取 当前页面,完全没有post 请求,想着以前 遇上这样的问题 都是因为 表单中 有 name 或者 id 这些命名跟submit 有冲突,但是检查了几次,始终没有发现 名字冲突,所以这个可能性被排除. 平常自己做触发按钮,基本不用a 标签,但是昨天不知道什么 问题,竟然用了 a 而且还给了 href 为空,由于这个a 的class 有多个

  • 使用ajax异步提交表单的几种方法总结

    这里介绍三种常用的提交方式 方式一 手工收集所有的用户输入,封装为大的"k1=v1&k2=v2-"键值对形式,使用$.post(url, data,fn)把数据提交给服务器 $.ajax({ type:'post', url:'Notice_noTipsNotice', data:'k1=v1&k2=v2...', cache:false, dataType:'json', success:function(data){ } }); 方式二 单序列化:$('#myfor

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

    工作中发现表单提交方便的问题,很多时候IE下提交好好的,打了火狐下就出现了问题,利用提交按钮就不成功了,于是利用JS的方式就成功了,也不知道为什么.在导师的催促下就总结出以下的几种常用表单提交的方法. 第一种方式:表单提交,在form标签中增加onsubmit事件来判断表单提交是否成功 <script type="text/javascript"> function validate(obj) { if (confirm("提交表单?")) { aler

  • Chrome Form多次提交表单问题的解决方法

    今天用chrome提交一个表单时,发现一个奇怪的问题: 复制代码 代码如下: //提交表单 document.frmOrder.action = 'http://www.abc.com/d.aspx'; document.frmOrder.method = 'POST'; document.frmOrder.target = '_blank'; document.frmOrder.submit(); 第一次提交可以,第二次提交就没有任何响应了.需要重新加载页面后才可以提交,而这个问题在Firef

  • js校验表单后提交表单的三种方法总结

    第一种: 复制代码 代码如下: <script type="text/javascript">         function check(form) { if(form.userId.value=='') {                alert("请输入用户帐号!");                form.userId.focus();                return false;           }       if(fo

  • js 回车提交表单两种实现方法

    1.JavaScript 方法: 复制代码 代码如下: [javascript] <script> document.onkeydown=function(event){ e = event ? event :(window.event ? window.event : null); if(e.keyCode==13){ //执行的方法 alert('回车检测到了'); } } </script> <script> document.onkeydown=function

随机推荐