99久久国产露脸精品麻豆,欧美日韩精品小说,亚洲免费在线美女视频,国产三级中文字幕,91极品国产情侣高潮对白,国产亚洲一区二区三区不卡片,欧美jizz精品欧美性,久久国产精品久久国产片

通過new FormData對象異步上傳文件

袁志蒙 2018-05-29 17:03:11 6372次瀏覽

摘要：現在有一個場景，一個form表單里面，除了普通的數據外，還有文件上傳input[type=file]，怎么可以ajax異步提交呢？如果采用表單serialize()序列化用Ajax的方式提交，也無法把...

現在有一個場景，一個form表單里面，除了普通的數據外，還有文件上傳input[type=file]，怎么可以ajax異步提交呢？

如果采用表單serialize()序列化用Ajax的方式提交，也無法把上傳文件的文件流進行序列化，所以不行，那么現在可以用到FormData對象了。

new FormData該對象不僅僅可以序列化文件，一樣可以用作表單數據的序列化，（就是說包含了serialize()的功能）

首先看一下formData的基本用法：FormData對象，可以把所有表單元素的name與value組成一個queryString，提交到后臺。只需要把 form 表單作為參數傳入 FormData 構造函數即可。

FormData 上傳文件實例：

前端代碼：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>test</title>
<script src="js/jquery.js"></script>
</head>
<body>
<form  action="" method="post" id="myform" onsubmit="return dosub()">
        <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>number：<input type="text" name="number" /></p>  
        <p>photo:<input type="file" name="photo" id="photo"></p>  
        <p><input type="submit" value="保存" /></p>  
</form>  


<script>
//ajax提交
function dosub(){
	var form=document.getElementById("myform");
	var data = new FormData(form);
	$.ajax({
		type: 'POST',
		url: 'server.php', 
		data: data,
		dataType: "json", 
		processData: false,  // 告訴jQuery不要去處理發送的數據
		contentType: false,   // 告訴jQuery不要去設置Content-Type請求頭
		success: function (msg) {
			if(msg.status == 1){
				alert('上傳成功');
			}else{
				alert('上傳失敗');
			}
		}
	})
	return false;		
}
</script>
</body>
</html>

PHP代碼：

<?php
//這里只簡單打印一下接收到的數據，并未做上傳功能
var_dump($_POST);
var_dump($_FILES);

PHP打印結果：

array(3) {
  ["name"]=>
  string(6) "yzmcms"
  ["gender"]=>
  string(1) "1"
  ["number"]=>
  string(3) "100"
}

array(1) {
  ["photo"]=>
  array(5) {
    ["name"]=>
    string(6) "33.jpg"
    ["type"]=>
    string(10) "image/jpeg"
    ["tmp_name"]=>
    string(51) "C:\Users\yuanzhimeng\AppData\Local\Temp\php7414.tmp"
    ["error"]=>
    int(0)
    ["size"]=>
    int(1085354)
  }
}