Как загрузить изображение base64 для ввода типа файла?

У меня есть вход:

<input id="imagen" name="imagen[]" type="file" multiple class="file-loading" onchange="">

И у меня есть кнопка сканирования

<button type="button" class="btn btn-success" onclick="scannear()"><i class="fa fa-print"></i> Escanear</button>

Эта кнопка открывает гнездо подключения к моему сканеру и извлекает изображение в Base64, оно скажем string, который я хочу загрузить в мой тип файла ввода, как я могу это сделать?

Чтобы быть понятнее, если у меня есть строка:

var cadena="data:image/jpeg;base64,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";

Как назначить это значение для ввода типа файла?

1
задан 22.11.2019, 19:02
1 ответ

Из-за razГіn безопасности не возможно загружать вручную файл в <input type="file">

год Но, если envГ-схвати данные используя AJAX, тогда мы можем использовать это, чтобы посылать изображение как файл, без необходимости использовать один input file.

Пример:

  • С API fetch, чтобы обращать цепь base64 в blob.
  • Мы Используем File, чтобы создавать blob файл.
  • И с FormData, получать данные о формуляре, добавлять вручную файл

Тогда, когда мы получаем изображение в base64, мы обращаем ее в "файл"

var image = "data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD...";
var files = [];

fetch(image)
  .then(res => res.blob())
  .then(blob => {
    files.push(new File([blob], 'image.jpeg', {type: blob.type}));
 })

Потом, когда формуляр послан, получаем данные, загруженные в этом и добавляем вручную файл:

Используя чистые Javascript:

var form = document.getElementById('id-del-form');
form.onsubmit = function() {
  var formData = new FormData(form);

  // AQUI agregamos manualmente el archivo
  files.forEach(function(file, idx) {
    formData.append('imagen['+idx+']', file);
  });

  var xhr = new XMLHttpRequest();
  xhr.open('POST', form.getAttribute('action'), true);
  xhr.send(formData);

  return false; // Evitamos que el formulario se envíe
}

Используя jQuery:

var $form = $('#id-del-form');
$form.on('submit', function(e) {
  e.preventDefault();

  var formData = new FormData($form[0]);

  // AQUI agregamos manualmente el archivo
  files.forEach(function(file, idx) {
    formData.append('imagen['+idx+']', file);
  });

  $.ajax({
    url: $form.prop('action'),
    type: "post",
    data: formData,
    cache: false,
    contentType: false,
    processData: false
  })
});
0
ответ дан 01.12.2019, 10:57

Теги

Похожие вопросы