FormData表单数据提交表单及上传图片详解

程序员文章站 2022-04-03 09:24:58

...

在H5中利用FormData表单数据对象，可以把form表单中所有表单元素的name与value组成一个请求字符串，提交到后台。可通过js用一些键值对来模拟一系列表单控件，还可以使用XMLHttpRequest的send()方法异步提交表单。

<body>
	<p>
		<h2>无刷新方式收集表单数据</h2>
		<form>
			<p>用户名 : <input type="text" name="username" value="jnjk" /></p>
			<p>密 码 : <input type="password" name="password" value="123456" /></p>
			<p>邮 箱 : <input type="text" name="email" value="jnjk@qq.com" /></p>
			<p>头 像 : <input type="file" name="headimg" value="" /></p>
			<img src="" id="headimg" />
			<p style="text-align:center;"><input type="submit"  value="提交" /></p>
		</form>
	</p>
</body>

表单中有普通的text字符提交，也有file文件提交，使用FormData对象可以全部获取到表单域数据。

<script type="text/javascript">
	var fm = document.getElementsByTagName("form")[0];
	var himg = document.getElementById("headimg");
	fm.addEventListener("submit",function(e){
		//使用 FormData 表单数据对象,收集表单数据
		//var fdata = new FormData(fm);	//收集fm的表单信息
		var fdata = new FormData(this);	//收集fm的表单信息
		
		var xhr = new XMLHttpRequest();
		xhr.onreadystatechange = function(){
			if(xhr.readyState == 4 && xhr.status == 200){
				var msg = xhr.responseText;
				eval("var return_obj = "+msg);		//将返回的json字符串转化为对象
				console.log(return_obj);
				if(return_obj.status){
					himg.setAttribute('src',return_obj.data.headimg);
					himg.setAttribute('style','display:block');
				}else{
					alert(return_obj.data);
				}
			}
		}
		xhr.open('post','data.php');
		xhr.send(fdata);
		
		e.preventDefault();	//阻止浏览器默认动作
	});
</script>

data.php

<?php

$data = $_POST;					//普通表单域
$file = $_FILES['headimg'];		//文件上传

if($file['error'] > 0) exit(json_encode(array('status'=>0,'data'=>'文件异常')));

$save_path = './upload/'.date('Ymd').'/';
if(!is_dir($save_path)){
	mkdir(iconv("GBK","UTF-8",$save_path),0777,true); 
}
$name = $file['name'];

$true_name = $save_path.$name;
$upres = move_uploaded_file($file['tmp_name'],$true_name);   //修改文件存储位置
if($upres){
	$data['headimg'] = $true_name;
	echo json_encode(array('status'=>1,'data'=>$data));
}else{
	echo json_encode(array('status'=>0,'data'=>'upload error'));
}

FormData表单数据提交表单及上传图片详解

以上就是FormData表单数据提交表单及上传图片详解的详细内容，更多请关注其它相关文章！

FormData表单数据提交表单及上传图片详解

yii框架表单模型使用及以数组形式提交表单数据示例_PHP

vue+elementUI实现表单和图片上传及验证功能示例

基于ASP.NET+EasyUI框架实现图片上传提交表单功能(js提交图片)

vue+elementUI实现表单和图片上传及验证功能示例

微信小程序学习笔记之表单提交与PHP后台数据交互处理图文详解

基于ASP.NET+EasyUI框架实现图片上传提交表单功能(js提交图片)

vue组件表单数据回显验证及提交的实例代码

yii框架表单模型使用及以数组形式提交表单数据示例

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

ionic cordova一次上传多张图片（类似input file提交表单)的实现方法