Question

描述＆amp; CODE：

1）我的网站（通过动态jQuery上传创建）中有图像文件：

<img src="blob:http%3A//www.example.net/6cf3e4f6-9666-41c8-a588-73f2e5057ee0">

2）经过一些操作（例如按钮点击）后，我想将所有这些BLOB图像保存在服务器上。我使用 jQuery 代码：

$('button').on('click', function() {
    $('#editor-label-working-area .object_container .image_container img').each(function() {
        var blob = null;
        var image = $(this);
        var file = $(image).attr('src');
        var oReq = new XMLHttpRequest();

        oReq.open('GET', file, true);
        oReq.responseType = 'blob';

        oReq.onload = function() {
            blob = new Blob([oReq.response], {
                type: 'image/jpg'
            });
        };

        oReq.send();

        //(Problem No. 1) This timeOut is used just for test. I need to wait untill XMLHttpRequest is finished.
        setTimeout(function() {
            var formData = new FormData();
            formData.append('file', blob);

            $.ajax({
                type: 'POST',
                url: 'upload_image.php',
                data: formData,
                processData: false,
                contentType: false,
                success: function(data) {
                    console.log(data);
                },
                error: function(response) {
                    console.log(response);
                }
            });
        }, 2000);
    });
});

3）在AJAX请求中，我想使用 PHP 代码获取发布的文件并将其保存在服务器上：

<?php
    define('UPLOAD_DIR', 'labels/');

    /*(Problem No. 2) Here I get empty array from $_POST method*/
    $img = $_POST['file'];

    $img = str_replace('data:image/png;base64,', '', $img);
    $img = str_replace(' ', '+', $img);

    $data = base64_decode($img);
    $file = UPLOAD_DIR . uniqid() . '.jpg';

    $success = file_put_contents($file, $data);

    print $success ? $file : 'Unable to save the file.';
?>

的问题

1.可选问题：在我的jQuery代码中，我必须使用JS timeout方法等待XMLHttpRequest创建一个blob文件。我需要了解如何使用某种等待方法，而不是在随机等待秒上工作

2）主要和最重要的问题：为什么我的PHP代码在$ _POST方法中接收空数组？如果我做

echo json_encode($_POST['file']);

..然后AJAX .success函数在我的浏览器控制台中打印一个空数组：

[]

Answer 1

而不是使用setTimeout只需将te ajax请求放在第一个成功的地方。附加blob时，数据不会存储在$ _POST中，而是存储在$ _FILES中。

    var image = $(this);
    var file = $(image).attr('src');
    var oReq = new XMLHttpRequest();

    oReq.open('GET', file, true);
    oReq.responseType = 'blob';

    oReq.onload = function() {
        var formData = new FormData();
        formData.append('file', this.response);

        $.ajax({
            type: 'POST',
            url: 'upload_image.php',
            data: formData,
            processData: false,
            contentType: false,
            success: function(data) {
                console.log(data);
            },
            error: function(response) {
                console.log(response);
            }
        });
    };

    oReq.send();

PHP无法读取AJAX发布的BLOB FormData文件

1 个答案: