Из IMG TAG в FILE INPUT

У меня есть изображение с URL-адресом base64 как src. Я хотел бы отправить это изображение на сервер, используя входной файл (с формой). Итак, мне нужно преобразовать тег img во входной файл.

Я использую плагин Croppie для обрезки изображения. Затем результат записывается в тег img.

Я попытался преобразовать тег img в файл. Но тогда я не знаю, как преобразовать файл во входной файл.

<div>
    <label for = "img">Image</label><input type = "file" name = "img" id = "img" value = ""/>
</div>
<div>
    <img id = "outImg" />
    <input type = "file" name = "imgtbn" id = "imgtbn" value = ""/>
</div>



 document.getElementById('img').onchange = function (evt) {
    var output = document.getElementById('outImg');
    output.src = URL.createObjectURL(evt.target.files[0]);


    if (this.c!=undefined)
    {
        this.c.destroy();
    }
    var el = document.getElementById('outImg');
    this.c = new Croppie(el, {
        viewport: { width: 300, height: 300 },
        boundary: { width: 900, height: 300 },
        showZoomer: false,
        enableOrientation: true,
        update: function (data) {
            this.result('base64').then(function(dataImg) {
                $('#imgCropped').attr('src', dataImg);

                img = document.getElementById('imgCropped');

                fetch(img.src)
                    .then(res => res.blob())
                    .then(blob => {
                        file = new File([blob], 'file', blob)
                        document.getElementById('imgtbn').file = file;
                    });
            })
        }
    });
};

Я хотел бы, чтобы входной файл был заполнен обрезанным изображением.

Спасибо за уделенное время.

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
0
691
2

Ответы 2

Вы не можете. Вы не только не можете использовать base64 в теге файла, но только в реальном файле, но вы даже не можете вообще установить значение ввода файла в Javascript. Это вопрос безопасности.

Но почему вы хотите? Если у вас уже есть файл, закодированный как base64, любой текстовый ввод подходит для его отправки на сервер. Я бы, вероятно, использовал <input type="hidden">, потому что нет смысла отображать код. И если вы хотите предварительный просмотр, используйте тег img.

Как сказал Amunium, входные файлы доступны только для чтения.

Сохранение изображения base64 на скрытом входе — лучший способ сделать это.

Можно очистить входные значения файла программно, но они все равно будут отправлены; хоть и пустой.

Существует простое объяснение того, как это сделать простым способом..

Другие вопросы по теме