使用FormData的AJAX图像上传不会在服务器端显示图像

Question

我正在创建一个图像上传系统，只需将图像附加到input[type='file']元素上即可上传图像。 但是，我很难将图像提供给服务器端。

测试用例

HTML：

<a class="button" data-action="upload-images">Upload Image</a>
<div style="display:none;">
    <form method="POST" enctype="multipart/form-data" class="image-upload-form">
        <input type="file" name="image" data-caller="upload-images" accept="image/*" />
        <input type="hidden" name="object_id" value="1"/>
    </form>
</div>

JavaScript的：

// Let a custom button open the file selection frame
jQuery( document ).on( "click", "[data-action='upload-images']", function() {
    jQuery( this ).parent().find( "[data-caller='upload-images']" ).click();
});

// Catch a file upload
jQuery( document ).on( "change", "[data-caller='upload-images']", function() {

    jQuery.ajax({
        url: "ajax/image-upload",
        type: "POST",
        data:  new FormData( this.parentNode ),
        contentType: false,
        processData: false,
        success: function( data ) {
            console.log( data );
        }
    });

});

PHP： ajax / image-upload

var_dump($_POST);

测试

执行此代码会在控制台中提供以下输出：

array(1) {
    ["object_id"]=>
    string(1) "1"
} // No image?

请求有效负载是：

------WebKitFormBoundaryi8mRsBbBQSmCgZ4f
Content-Disposition: form-data; name="image"; filename="TrueTone.png"
Content-Type: image/png


------WebKitFormBoundaryi8mRsBbBQSmCgZ4f
Content-Disposition: form-data; name="object_id"

1
------WebKitFormBoundaryi8mRsBbBQSmCgZ4f--

我试过了什么

我真的找不到将上传的图像传送到服务器端的方法。 到目前为止，我已经看到了几个使用相同方法的教程但是捕获文件上传onSubmit并使用e.preventDefault取消实际提交。 我用提交按钮完全重写了我的代码，以复制这种捕获图像的方式，但没有任何成功。

请求有效内容指示文件正在上载但在服务器端不可见。 我希望你能帮助我。

Answer 1

使用print_r($_FILES)检查是否发送了任何文件而不是$_POST 。