У меня есть страница, которая отображает изображения в полях, и они являются перетаскиваемыми изображениями. У меня также есть поля загрузки входного файла. Цель состоит в том, чтобы пользователь мог перетаскивать изображения в поле загрузки входного файла.
Возможно ли это? Я пытаюсь запретить пользователям загружать изображения в локальную папку p c, а затем нажимать входной файл, чтобы выбрать изображение. Так что это больше, если пользовательский опыт для сокращения шагов. В основном на странице будет серия из 10 изображений одежды. И тогда у меня есть 5 полей входного файла, который имеет метку (спереди, сзади, lo go et c.). Так что, в основном, присваивая базу изображений метке поля входного файла.
Я ищу и не могу найти ничего подобного, или есть другой способ приблизиться к этому?
Вот файл скрипта, который у меня есть:
<div class="row">
<div class="col overflow-auto" style="height: 213px; border: 1px solid red; padding: 5px;" id="image_list" ondrop="drop(event)" ondragover="allowDrop(event)">
<img height="100" width="100" src="https://image.shutterstock.com/image-vector/sample-stamp-grunge-texture-vector-260nw-1389188336.jpg" draggable="true" id="10-0" style="border: 1px solid black;">
<img height="100" width="100" src="https://image.shutterstock.com/image-vector/sample-stamp-grunge-texture-vector-260nw-1389188336.jpg" draggable="true" id="10-0" style="border: 1px solid black;">
</div>
<div class="form-group">
<label for="title">Front *</label>
<input type="file" id="front_image" name="front_image" accept="image/*">
</div>