Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 22.10.2017, 18:40
Интересующийся
Отправить личное сообщение для new_developer Посмотреть профиль Найти все сообщения от new_developer
 
Регистрация: 25.07.2014
Сообщений: 28

отловленый файл с event'a прикрепить к инпуту
Всем здрасте, возможно ли отловленный файл с евента прикрепить к инпуту?

<input type="file" name="file">


если я пытаюсь добавить к value полученный файл получаю SecurityError: The operation is insecure

var files = e.target.files || e.dataTransfer.files;
 
var file = files[0];


у меня есть форма которая добавленный файл сохраняет без аякса, попросили добавить ещё drag and drop чтобы можно было перетягивать файл, идеально было-бы чтобы сохранение файла логика осталась тойже.
Ответить с цитированием
  #2 (permalink)  
Старый 23.10.2017, 10:45
Интересующийся
Отправить личное сообщение для new_developer Посмотреть профиль Найти все сообщения от new_developer
 
Регистрация: 25.07.2014
Сообщений: 28

настолько тяжелая тема что ни у кого никаких мыслей на этот счёт?))

Или я не понятно изложил проблему?)
Ответить с цитированием
  #3 (permalink)  
Старый 23.10.2017, 11:06
Профессор
Отправить личное сообщение для Nexus Посмотреть профиль Найти все сообщения от Nexus
 
Регистрация: 04.12.2012
Сообщений: 3,793

new_developer,
Сообщение от new_developer
возможно ли отловленный файл с евента прикрепить к инпуту?
Попробуйте и поделитесь опытом.

Из события нужно вытянуть экземпляр класса FileList и попытаться присвоить его инпуту.
Ответить с цитированием
  #4 (permalink)  
Старый 23.10.2017, 15:18
Аватар для Alexandroppolus
Профессор
Отправить личное сообщение для Alexandroppolus Посмотреть профиль Найти все сообщения от Alexandroppolus
 
Регистрация: 25.10.2016
Сообщений: 1,012

Сильно сомневаюсь, что файловый инпут можно программно заполнить списком файлов из D-n-D.

Потому, вариантов два:

1) таки отправлять форму аяксом. FormData, всё просто и без заморочек. TrueЪ way в современном фронтенде. Если серверный обработчик формы работает с кодировкой utf8, то в нем вообще ничего менять не придется.

2) Во многих браузерах файловый инпут уже умеет схватить файлы, которые падают на него при перетаскивании. Остается только это дело красиво оформить: в обработчике документного события dragover (когда указатель мыши с выбранными файлами заехал на страницу, но ещё не было сброса) показываем див с предложением "перетащите файлы сюда", ну как обычно делается, а поверх этого дива растягиваем файловый инпут, сделав его прозрачным. Тогда сброс файлов произойдет на файловый инпут, на нем сработает событие "change", и можно будет спрятать див и вообще вернуть всё на место.
Я эту схему не проверял, но навскидку должна сработать.

Последний раз редактировалось Alexandroppolus, 23.10.2017 в 15:26.
Ответить с цитированием
  #5 (permalink)  
Старый 23.10.2017, 16:03
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,989

Сообщение от Alexandroppolus
а поверх этого дива растягиваем файловый инпут, сделав его прозрачным.
Если методом перетаскивания, то поля ввода и не нужно, у dataTransfer будет своя коллекция files.
Ответить с цитированием
  #6 (permalink)  
Старый 23.10.2017, 18:16
Интересующийся
Отправить личное сообщение для new_developer Посмотреть профиль Найти все сообщения от new_developer
 
Регистрация: 25.07.2014
Сообщений: 28

По поводу перетащить и добавить к инпуту не получится по крайней мере во всех браузерах точно. Делаю аяксом.

Последний раз редактировалось new_developer, 23.10.2017 в 18:27.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск