AJAX 使用 FormData 上传图片在服务器端不显示图片

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。

AJAX 使用 FormData 上传图片在服务器端不显示图片

AJAX image upload with FormData doesn't show image on server side

javascript

php

ajax

jquery

form-data

测试用例

测试

我试过的