перетащите файлы в стандартный HTML-файл - PullRequest
Новая
       61

перетащите файлы в стандартный HTML-файл

135 голосов
/ 04 ноября 2011

В наши дни мы можем перетаскивать файлы в специальный контейнер и загружать их с помощью XHR 2. Многие за один раз.С живыми прогресс-барами и т. Д. Очень классные вещи. Пример здесь.

Но иногда мы не хотим такой крутости.Я хотел бы перетащить файлы - по нескольку одновременно - в стандартный ввод HTML-файла : <input type=file multiple>.

Возможно ли это?Есть ли способ «заполнить» файл ввода правильными именами файлов (?) Из файла drop?(Полные пути к файлам недоступны по соображениям безопасности файловой системы.)

Почему? Поскольку я хотел бы отправить обычную форму.Для всех браузеров и всех устройств.Перетаскивание - это просто прогрессивное усовершенствование для улучшения и упрощения UX.Там будет стандартная форма со стандартным вводом файла (атрибут * multiple).Я хотел бы добавить улучшение HTML5.

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

Ответы [ 12 ]

0 голосов
/ 26 января 2019

Это то, с чем я вышел.

Использование Jquery и Html.Это добавит его в файлы вставки.

var dropzone = $('#dropzone')


dropzone.on('drag dragstart dragend dragover dragenter dragleave drop', function(e) {
    e.preventDefault();
    e.stopPropagation();
  })

dropzone.on('dragover dragenter', function() {
    $(this).addClass('is-dragover');
  })
dropzone.on('dragleave dragend drop', function() {
    $(this).removeClass('is-dragover');
  })  
  
dropzone.on('drop',function(e) {
	var files = e.originalEvent.dataTransfer.files;
	// Now select your file upload field 
	// $('input_field_file').prop('files',files)
  });
input {	margin: 15px 10px !important;}

.dropzone {
	padding: 50px;
	border: 2px dashed #060;
}

.dropzone.is-dragover {
  background-color: #e6ecef;
}

.dragover {
	bg-color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<div class="" draggable='true' style='padding: 20px'>
	<div id='dropzone' class='dropzone'>
		Drop Your File Here
	</div>
	</div>
0 голосов
/ 11 ноября 2011

Что вы можете сделать, это отобразить файл ввода и наложить его на прозрачную область перетаскивания, стараясь использовать имя типа file[1]. {Убедитесь, что в вашем теге FORM есть enctype="multipart/form-data".}

Затем дроп-область обрабатывает дополнительные файлы, динамически создавая дополнительные входные данные для файлов 2..number_of_files, обязательно используйте то же базовое имя, заполняя атрибут-значение соответствующим образом.

Наконец (передний конец) отправьте форму.

Все, что требуется для обработки этого метода, - это изменить процедуру обработки массива файлов.

Страница:
...