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="//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="'%20+%20ret['photo']%20%20+%20'" 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);
?>

PHP结合HTML5使用FormData对象提交表单及上传图片

原文：http://www.phpxs.com/post/3003

转自：PHP结合HTML5使用FormData对象提交表单及上传图片

PHP结合HTML5使用FormData对象提交表单及上传图片相关推荐

php form 上传_php+html5使用FormData对象提交表单及上传图片的方法
本文实例讲述了php+html5使用FormData对象提交表单及上传图片的方法.分享给大家供大家参考.具体分析如下: FormData 对象,可以把form中所有表单元素的name与value组成一 ...
FormData对象提交表单及上传图片/文件
1.创建一个FormData空对象,然后使用append方法添加key/value var formdata = new FormData(); formdata.append('name','fdi ...
html5表单提交json数据库,使用html5的FormData对象,通过 Ajax表单异步提交文件数据...
每次在向服务器提交文件对象数据是,总是需要借助各种三方插件来实现表单异步提交功能,还要为不同的界面去定制不同的插件css,相当繁琐.XMLHttpRequest Level 2 添加了一个新的接口-- ...
前端：JS/32/form对象（表单）（form对象的属性，方法和事件），受返回值影响的两个事件（onclick事件，onsubmit事件），获取表单的元素对象的三种方式，表单的提交和验证方法总结
form 对象(表单) 一个<form>标记,就是一个<form>对象: 1,form对象的属性 name :表单的名称,主要用来让JS来控制表单: action :表单的数据 ...
html5如何提交到邮箱,如何在html网页中提交表单直接发送到邮箱
如何在html网页中提交表单直接发送到邮箱?此问题一直困扰了我很久很久,后来了解到jmail组件可以解决此问题,而且现在的付费空间基本都会有此组件.分别建立表单页和asp页面,提交表单后通过asp页面 ...
【Java Web】在html界面中提交表单，由jsp进行接收并展示[jsp的接收使用的是jsp内置对象] 【上课记录】
9月27号[上午1-2节java web课] 1.jsp+html[简单提交表单] html代码 <!DOCTYPE html> <html> <head> < ...
AJAX 提交表单以及文件上传
本文转自:https://www.cnblogs.com/zhuxiaojie/p/4783939.html#autoid-0-0-0 作者:朱小杰前言使用ajax请求数据,很多人都会,比如说: ...
jquery用ajax提交表单
jquery ajax三种方式异步提交表单一.使用Html5 FormData对象的方式ajax异步提交数据和文件: 注意代码Jquery ajax的必须传参数processData: false, ...
如何防止按钮提交表单
在下一页中,使用Firefox,"删除"按钮提交表单,但"添加"按钮不提交. 如何防止"删除"按钮提交表单? <html> &l ...

PHP结合HTML5使用FormData对象提交表单及上传图片

PHP结合HTML5使用FormData对象提交表单及上传图片相关推荐

最新文章

热门文章