javascript - 使用 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。