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

Question

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

我的代码 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
        }
    });
});

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

How to upload image while using serialize Array in JavaScript?

javascript

post

file-upload

image-processing

serializearray