javascript - 输入文件(图像)显示空数组，我应该在数组中包含数据吗？

Question

html

<form method="post" action="" id="dataForm">
    <input type="file" name="embleLoader"/>
    <button name="sub-comfirm" class="btn-selection-content" type="submit" id="sub-comfirm">Send</button>
</form>

JS

$(document).ready(function(){
    $('#dataForm').on('submit', function(e) {
        e.preventDefault();
        SendData();
    });
});

function SendData(){
    var postData = $("#dataForm").serializeArray();

    $.ajax({
    type: "POST",
    url: "checkinput.php",
    data: postData,
    success:function(data)
    {
        console.log(data);
        console.log("suceess");
    },
    error: function(jqXHR, textStatus, errorThrown) 
    {
        console.log("failure");
    }
    });
}

php

<?php
$get = $_FILES["embleLoader"];
print_r($_FILES);
?>

我的目的是使用ajax将我的输入文件(图像值)传递给php，将数据传递给php，我使用$_FILES来检查我的输入文件数据，它给我空数组，为什么我无法获取数据使用我的代码？它应该是数组 tmp_name 内的某个内容还是 error>0 。类似的东西？

如何使用输入文件传递图像并传递给 php。

返回结果:

Array
(
)

inputfile.html:30 suceess

Answer 1

选择文件时，您需要将文件信息存储在全局变量中，然后使用该全局变量发送文件，如下所示:

HTML:

<form method="post" action="" id="dataForm" enctype="multipart/form-data">
            <!-- assign a id to input field here -->
            <input type="file" name="embleLoader" id="fileSelector"/>
            <button name="sub-comfirm" class="btn-selection-content" type="submit" id="sub-comfirm">Send</button>
</form>

Javascript:

<script type="text/javascript">
    var fileVar = null;// global var to store file info
    $(document).ready(function(){
        $('#dataForm').on('submit', function(e) {
            e.preventDefault();
            SendData();
        });

        $('#fileSelector').on('change',function(ev){
            fileVar = null;
            fileVar = new FormData();
            $.each(ev.target.files, function(key, value)
            {
                fileVar.append(key, value);                 
            });
        });
    });

    function SendData(){
        $.ajax({
            type: "POST",
            url: "checkinput.php?files",//you need to add this '?files part' to URL
            data: fileVar,// use fileVar here now
            cache: false,
            processData: false, 
            contentType: false, 
            success:function(data)
            {
                console.log(data);  
                console.log("success");
            },
            error: function(jqXHR, textStatus, errorThrown) 
            {
                console.log("failure");
            }
        });
    }
</script>