Блог

Главная - Вопросы по программированию - Как расширить удаляемую область входных файлов до области div?

Как расширить удаляемую область входных файлов до области div?

#javascript #html #css #file-upload #drag-and-drop

#javascript #HTML #css #загрузка файла #перетаскивание

Вопрос:

Как я могу принять перетаскивание файлов в div, как если бы они были перетащены в целевой элемент ввода файла?

Это работает только для <input type="file" /> :

 <form method="post" enctype="multipart/form-data" id="frm_upload">
    <input type="file" name="input_upload">
    <div id="div_upload">Drag amp; Drop here</div>
</form>

$(':file').change(function(){
    var file = this.files[0];
    var formData = new FormData($('frm_upload')[0]);
    formData.append('input_upload', file);

    $.ajax({
       url: base_url,
       type: 'POST',
       data: formData,                  
       cache: false,
       contentType: false,
       processData: false,
       dataType: 'JSON',
       success: sucessBinder
    });
});

Возможно ли без ajax автоматически привязывать перетаскиваемые файлы <input type="file" /> ?

Комментарии:

1. Вы захотите использовать атрибуты on-drop, on-drag-enter, on-drag-exit в html. Ответ не совсем удовлетворил мой конкретный случай. Напишите мне для получения дополнительной информации!

Ответ №1:

Вы можете поместить div поверх ввода файла. Чтобы он по-прежнему принимал перетаскиваемые файлы, добавьте pointer-events: none в div.

 div {
  position: absolute;
  width: 300px;
  height: 100px;
  pointer-events: none;
  background: #000;
  color: #fff;
  text-align: center;
}
input {
  position: absolute;
  width: 300px;
  height: 100px;
  opacity: 0;
}  
 <input type="file" />
<div>Drop a file here</div>