JavaScript — загрузка, перетаскивание & amp; Перетащите файл (изображение) в Angular

Загрузить, перетащить файл (изображение) в Angular

У меня есть функция для загрузки файлов, а также перетаскивания. Моя проблема заключается в том, что, перетаскивая файл или нажимая кнопку и выбирая одно или несколько изображений … они находятся в выпадающей строке, как показано на рисунке 1.

https://imgur.com/CbXEpFV

Я хотел бы, чтобы при выборе или перетаскивании только одного изображения оно оставалось в гигантском поле (поле, куда перетаскивались файлы) и заполняло его полностью.

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

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

https://imgur.com/cWTlIjD

CODEPEN

https://codepen.io/hefty95/pen/dyyObEO

некоторый код

  function handleFileSelect(evt) { var files = evt.target.files; // FileList object // Loop through the FileList and render image files as thumbnails. for (var i = 0, f; f = files[i]; i  ) { // Only process image files. if (!f.type.match('image.*')) { continue; } var reader = new FileReader(); // Closure to capture the file information. reader.onload = (function (theFile) { return function (e) { // Render thumbnail. var span = document.createElement('span'); span.innerHTML = ['{amp}lt;img class="thumb" src="', e.target.result, '" title="', escape(theFile.name), '"/{amp}gt;'].join(''); document.getElementById('list').insertBefore(span, null); }; })(f); // Read in the image file as a data URL. reader.readAsDataURL(f); } } $('#files').change(handleFileSelect); } 
Понравилась статья? Поделиться с друзьями:
JavaScript & TypeScript
Adblock
detector