Отображение Drag and Drop картинки без загрузки ее на сервер

143

11 октября 2019, 20:30

Можно ли каким-то образом, используя drag and drop (например получив url перетаскиваемой картинки), не загружая картинку на сервер, отобразить ее в клиенте.

Сам файл мы получаем, например так: var image = e.originalEvent.dataTransfer.files; Но url этого файла получить нельзя, чтобы создать <img crs="...">

Answer 1

const dnd = document.getElementById('dnd'); 
 
dnd.addEventListener('dragover', event => { 
  event.preventDefault(); 
  dnd.dataset.over = true; 
  event.dataTransfer.dropEffect = 'copy'; 
}); 
 
dnd.addEventListener('dragleave', event => { 
  event.preventDefault(); 
  dnd.dataset.over = false; 
}) 
 
dnd.addEventListener('drop', event => { 
 
  event.preventDefault(); 
   
  dnd.dataset.over = false; 
 
  const text = event.dataTransfer.getData("text"); 
 
  if (text) { 
    let img = document.createElement('img'); 
    img.src = text; 
    document.body.appendChild(img); 
  } else { 
 
    const files = event.dataTransfer.files; 
 
    [].map.call(files, file => { 
 
      if (file.type.match(/^image/)) { 
 
        let reader = new FileReader(); 
 
        reader.onload = file => { 
          let img = document.createElement('img'); 
          img.src = file.target.result; 
          document.body.appendChild(img); 
        } 
 
        reader.readAsDataURL(file); 
 
      } 
 
    }) 
 
  } 
 
});

#dnd { 
  width: 100px; 
  height: 100px; 
  border: 1px dashed black; 
} 
 
#dnd[data-over="true"] { 
  background: rgba(0,0,0,.1); 
} 
 
img { 
  display: inline-block; 
  height: 100px; 
  margin-right: 5px; 
  margin-top: 5px; 
}