在 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
        }
    });
});