利用FormData實現HTML表單提交以及文件無刷新上傳
前端HTML代碼：
!DOCTYPE html>
<html>
<head>
<title>ajax文件上傳</title>
<meta charset="utf-8">
</head>
<body>
<form id="form1">
指定文件名：<input type="text" name="uname">
選擇文件：<input type="file" name="img">
<input type="button" id="btn" value="上傳">
</form>
</body>
</html>前端js代碼：
<script src="./jquery-3.2.1.min.js"></script>
<script type="text/javascript">
$("#btn").click(function(){
var formData = new FormData($("#form1")[0]);
$.ajax({
type: 'post',
url: './upload.php',
data: formData,
contentType: false, //必須false纔會自動加上正確的Content-Type
/**
* processData必須false纔會避開jQuery對 formdata 的默認處理
* XMLHttpRequest會對 formdata 進行正確的處理
*/
processData: false,
dataType: 'json',
success:function(result){
if(result.code === '200'){
alert(result.message);
}
},
error: function () {
alert("上傳失敗！");
return false;
}
});
});
</script>服務端PHP代碼：
<?php
header('content-type:text/html;charset=utf-8');
/**
* 怎麼接值
*/
$uname = isset($_POST['uname']) ? $_POST['uname'] : ''; //普通的值
$file_info = isset($_FILES['img']) ? $_FILES['img'] : []; //圖片的信息
//文件上傳代碼
move_uploaded_file($file_info["tmp_name"], "./" . $_FILES["img"]["name"]);
$result = [
'code' => '200',
'message' => '上傳成功',
];
echo json_encode($result);
如果想要上傳大文件,可能需要配置你的php.ini配置文件,詳細配置方法訪問：