Как отправить данные блоба изображения через обычную HTML-форму для использования в скрипте PHP

Question

У меня проблемы с отправкой данных блобов изображений из буфера обмена в обычную форму POST.Я искал в Интернете поиски способов сделать это на обычных формах, но 95% всех встреченных мной решений используют AJAX, и мне было интересно, есть ли способ сделать это без AJAX.

Используя приведенный ниже код, мне удается получить данные BLOB-объектов из буфера обмена и сгенерировать их URL.Однако, пытаясь отправить эти данные через обычную форму, я не могу понять, как это сделать.Я попытался отправить в виде «файла» (пытаясь получить данные с помощью $_FILES в PHP), но он либо просто отправил строку [object File], URL-адрес BLOB-объекта в виде строки, либо вообще ничего.

Используя какой-то код, с которым я столкнулся, мне удалось подняться сюда с моим JavaScript:

window.addEventListener('paste', e => {
    if (document.activeElement != document.getElementById('post-text')) return; // Check active element and stop if not in text box
    let blobData = e.clipboardData.items[0].getAsFile(); // Blob object
    let blobUrl = e.createObjectURL(blobData); // Blob URL
    document.getElementById('upload-display').src = blobUrl; // Display pasted image
    document.getElementById('upload-display-container').style.display = 'block';
    // Here I want to put a piece of code which adds the image data to a hidden input element, but I'm not sure how to do this.
});

Как мне добавить данные изображения к скрытому элементу ввода, который при отправке через HTMLPOST-форма, PHP может понимать и обрабатывать ее так же, как отправку по загруженному файлу?

В идеале я хотел бы добавить ее к фактическому <input> типа files, но после некоторогометодом проб и ошибок, а также некоторые исследования, которые я пришел к выводу, что это невозможно.

Answer 1

Спасибо @ludovico за указание в правильном направлении.Для тех, кто интересуется, вот как я решил это:

Для моего JavaScript (с удаленными функциями стилизации страницы):

window.addEventListener('paste', e => {
    if (document.activeElement != document.getElementById('post-text')) return; // Check active element and stop if not in text box

    let reader = new FileReader();
    reader.addEventListener('load', function() {
        document.getElementById('blob').value = reader.result;
    }, false);

    let blobData = e.clipboardData.items[0].getAsFile(); // Blob object
    let blobUrl = URL.createObjectURL(blobData); // Blob URL
    reader.readAsDataURL(blobData);
});

Затем в PHP я сделал что-то слегка странное, ноэто должно было сделать его совместимым с моим текущим кодом, который использует массив $ _FILES из обычной загрузки файла:

...
if (strlen($_FILES['image']['tmp_name']) == 0 && strlen($_POST['filename']) != 0) {
    $temp = tmpfile();
    $tempPath = tempnam(sys_get_temp_dir(), 'pastedimage');
    file_put_contents($tempPath,base64_decode(preg_replace('#^data:image/\w+;base64,#i', '', $_POST['filename'])));
    $fileType = getimagesize($tempPath)['mime'];
    if ($fileType == false) {
        // Handle error
        die();
    }
    $_FILES['image']['name'] = 'image.'.substr($fileType, 6);
    $_FILES['image']['type'] = $fileType;
    $_FILES['image']['tmp_name'] = $tempPath;
    $_FILES['image']['error'] = 0;
    $_FILES['image']['size'] = filesize($tempPath);
}
...