집 > 기사 > 운영 및 유지보수 > FormData 양식 데이터 제출 양식 및 업로드 이미지 상세 설명

FormData 양식 데이터 제출 양식 및 업로드 이미지 상세 설명

小云云원래의: 2018-03-20 16:12:062792검색

H5의 FormData 양식 데이터 개체를 사용하면 양식에 있는 모든 양식 요소의 이름과 값을 요청 문자열로 결합하여 백그라운드로 제출할 수 있습니다. 일부 키-값 쌍을 사용하여 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>

양식에는 일반 텍스트 문자 제출과 파일 파일 제출이 있습니다. 모든 양식 필드 데이터는 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(&#39;src&#39;,return_obj.data.headimg);
					himg.setAttribute(&#39;style&#39;,&#39;display:block&#39;);
				}else{
					alert(return_obj.data);
				}
			}
		}
		xhr.open(&#39;post&#39;,&#39;data.php&#39;);
		xhr.send(fdata);
		
		e.preventDefault();	//阻止浏览器默认动作
	});
</script>

data.php

<?php

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

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

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

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

위 내용은 FormData 양식 데이터 제출 양식 및 업로드 이미지 상세 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명：

이전 기사：Linux에서 현재 서버의 동시 접속량을 확인하는 방법다음 기사：Linux에서 현재 서버의 동시 접속량을 확인하는 방법