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" 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对象提交表单及上传图片
相关推荐
现在我们来关注如何利用FormData对象提交表单和上传图片。以下是一个完整的HTML页面示例，包含一个表单和一个图片上传控件： ```html <!DOCTYPE HTML> <html> <meta http-equiv="content-type" content="text/...
总结起来，PHP使用HTML5 FormData对象提交表单操作提供了更高效、灵活的表单数据处理方式，特别是在处理文件上传时，FormData对象的优势更为明显。结合XMLHttpRequest或fetch API，开发者可以构建出符合现代Web标准...
HTML5中的FormData对象是实现无刷新上传的关键技术之一。通过结合PHP和HTML5的FormData API，我们可以简化文件上传的实现过程，下面详细解析这一过程。 首先，FormData对象是一个构造函数，它能够以键值对的形式...
此压缩包"HTML5实现手机身份证表单上传提交特效源码.zip"显然提供了一套实现手机身份证照片上传并提交的前端解决方案。在分析这个源码之前，我们先来了解一下HTML5在表单和文件上传方面的关键特性。 1. **表单增强*...
HTML5的FormData对象是实现图片上传的核心工具。这个对象可以用来存储键值对，特别适合于发送到服务器的数据，包括上传的文件。你可以通过创建一个FormData实例，然后使用`append`方法添加文件，最后通过...
总结一下，PHP和HTML5结合使用可以提供高效、用户体验良好的文件上传功能。PHP负责后端的文件接收和存储，而HTML5的API则增强了前端的用户体验，包括无刷新上传和进度条显示。在实际开发中，还需要考虑错误处理、...
FormData 对象主要用于通过 XMLHttpRequest POST 方法提交表单数据，也可以用来上传文件。HTML5 通过 XMLHttpRequest Level 2 增加了对 FormData 的支持，使得开发者能够更加方便地进行文件上传等操作。 FormData ...
JQuery是一个广泛使用的JavaScript库，它极大地简化了DOM操作、事件...通过使用`$.ajax`方法并正确配置`FormData`，开发者可以轻松地实现在不刷新页面的情况下提交表单和文件，从而提高应用程序的性能和用户满意度。
在PHP开发中，多文件上传是一项常见的功能，尤其在处理用户提交的图片或者文档时。本插件结合了PHP、jQuery和Ajax技术，提供了一种高效、用户友好的多图片上传解决方案。通过Ajax异步传输，用户可以在不刷新页面的...
这个过程的核心在于使用`ajaxSubmit`结合FormData对象，通过Ajax将文件异步发送到服务器。通过这种方式，我们可以创建一个高效的、用户友好的多文件上传功能，而无需离开当前页面。同时，还可以根据需要添加额外的...
5. **前端反馈**：根据PHP返回的响应，使用JavaScript更新用户界面，显示上传进度和结果，例如使用进度条显示上传进度。 四、关键代码示例 前端JavaScript部分： ```javascript var formData = new FormData(); ...
本篇文章将深入探讨如何使用jQuery和FormData对象来实现异步文件上传。 首先，了解jQuery的核心概念。jQuery是一个轻量级的库，它简化了DOM操作、事件处理、动画制作和Ajax交互。它的语法简洁且易于理解，使得...
在传统的文件上传方式中，用户提交表单时，整个页面会刷新以处理上传请求。而异步上传则允许用户在不刷新页面的情况下进行文件传输，提高了用户体验。jQuery库提供了方便的Ajax功能，使得开发者可以轻松实现这一目标...
5. **提交图片数据**：当用户完成裁剪并提交时，将图片的原始数据和选区信息通过AJAX发送到服务器。使用`FormData`对象来方便地添加文件和参数。 6. **PHP处理**：在服务器端，使用PHP接收`FormData`数据，提取图片...
在以上代码中，当用户点击“上传”按钮时，会触发jQuery的事件处理器，读取文件并构建FormData对象，然后使用Ajax进行文件上传。注意，由于我们上传的是文件，所以需要禁用默认的`contentType`和`processData`设置，...
在本文中，我们将深入探讨如何使用PHP和JavaScript（特别是jQuery）通过XMLHttpRequest对象来实现视频文件的模拟表单上传，并且在上传过程中显示进度条，以及上传完成后自动加载和播放视频的功能。 首先，我们需要...
总结起来，使用jQuery实现图片嵌入表单主要涉及以下关键点：HTML表单的结构、`<input type="file">`元素、`FileReader` API、`FormData`对象以及Ajax提交。通过掌握这些技术，开发者能够创建出更加用户友好的、具有...
为了提高用户体验和处理大文件上传，开发者通常会利用JavaScript进行异步操作，jQuery提供了便利的工具，尤其是结合FormData对象，可以实现无刷新的文件上传。本篇文章将详细介绍如何使用jQuery和FormData来实现文件...