Как сделать drag and drop картинки в поле input?

Question

Как сделать drag and drop картинки в поле input?

Рейтинг: 0Ответов: 1Опубликовано: 16.04.2023

Нужно сделать, чтобы при перетаскивании картинки из локального диска в область input, картинка записалась в value этого input. То есть нужен такой же эффект как при обычном выборе файла картинки.

Искал подобные решение, но максимум что находил так это просто вывод картинки после перетаскивания. Но мне нужен не вывод, а именно, чтобы картинка записалась (сохранилась) в value input'а как при обычном выборе файла.

javascript html

Источник: Stack Overflow на русском

Answer 1

▲ 1

function readfiles(files) {
  for (var i = 0; i < files.length; i++) {
    document.getElementById('fileDragName').value = files[i].name
    document.getElementById('fileDragSize').value = files[i].size
    document.getElementById('fileDragType').value = files[i].type
    reader = new FileReader();
    reader.onload = function(event) {
      document.getElementById('fileDragData').value = event.target.result;}
    reader.readAsDataURL(files[i]);
  }
}
var holder = document.getElementById('holder');
holder.ondragover = function () { this.className = 'hover'; return false; };
holder.ondragend = function () { this.className = ''; return false; };
holder.ondrop = function (e) {
  this.className = '';
  e.preventDefault();
  readfiles(e.dataTransfer.files);
}

#holder.hover { border: 10px dashed #0c0 !important; }

<form method="post" action="http://example.com/">
  <input type="file"><input id="fileDragName"><input id="fileDragSize"><input id="fileDragType"><input id="fileDragData">
  <div id="holder" style="width:200px; height:200px; border: 10px dashed #ccc"></div>
</form>

Как сделать drag and drop картинки в поле input?

Ответы