如何在JavaScript中使用序列化数组上传图像

Question

我正在处理一个表单，该表单需要插入一些带有图像的数据，而无需重新加载页面。在我这边，当表单中没有图像文件时，一切都很好，但如果我的表单中有<input type="file">，那么我的代码就不会传递文件/图像信息。你们能教我在我的代码中添加什么来上传或传递图片吗？

我的代码HTML表单

<form action="action.php" method="POST" enctype="multipart/form-data" id="myform">
<input type="hidden" value="access" name="label">
<input type="text" name="one">
<input type="text" name="two">
<input type="file" name="image">
<button type="submit" id="mybtn">Add Data</button>
</form>
<div id="myresult"></div>

我的JavaScript

$('#mybtn').click( function(){
$.post(
$('#myform').attr('action'),
$('#myform:input').serializeArray(),
function(result) { 
// Some Stuff...
}
);
});

我的PHP

include 'database.php';
if ($_SERVER['REQUEST_METHOD'] == 'POST') {
$label = ["access"];
if (in_array($_POST['label'], $label)) {
switch ($_POST['label']) {
case 'access':
$one = $_POST['one'];
$two = $_POST['two'];
$file_name = $_FILES['image']['name'];
$file_size = $_FILES['image']['size'];
$file_temp = $_FILES['image']['tmp_name'];
$error = [];
$valid = [];
$flag1 = $flag2 = $flag3 = false;
if (!empty($one)) {
// Some validation
$flag1 = true;
} else {
$flag1 = false;
}
if (!empty($two)) {
// Some validation
$flag2 = true;
} else {
$flag2 = false;
}
if (!empty($file_name)) {
// Some validation
$flag3 = true;
} else {
$flag3 = false;
}
if ($flag1 && $flag2 && $flag3) {
// move_uploaded_file() + Insert All data
if ($result) {
$valid[] = "Data added successfully!";
} else {
$error[] = "Please try again later!";
}
} else {
$error[] = "Something went wrong!";
}
// ALERT MESSAGE [error] and [valid]
if (!empty($error)) {
foreach ($error as $value) {
echo json_encode($value);
}
}
if (!empty($valid)) {
foreach ($valid as $value) {
echo json_encode($value);
}
}
break;
default:
# code...
break;
}
}
}

当并没有输入类型文件时，这段代码在不重新加载页面的情况下工作得很好。我想知道我必须在JavaScript部分添加哪些代码才能成功地使用输入类型文件执行代码。

Answer 1

$('#dataBtnIMG').click( function(){
var form = $('#dataFormIMG');
var formData = new FormData($('#dataFormIMG')[0]);
$.ajax({
url: form.attr('action'),
type: form.attr('method'),
data: formData,
cache: false,
contentType: false,
processData: false,
success:function(result) {
// Some Stuff
}
});
});