Имитация события перетаскивания файлов, перетаскиваемых в браузер

#javascript #file #drag #data-transfer #drop

#javascript #файл #перетаскивание #передача данных #удаление

Вопрос:

Когда вы перетаскиваете файлы с рабочего стола в браузер, вы можете извлекать файлы как ‘FileEntry’, используя evt.dataTransfer.items[i].webkitGetAsEntry()

Однако мне интересно, можно ли создать это событие программно: передавать файлы (большие двоичные объекты или созданные с помощью конструктора файлов) с помощью события перетаскивания, чтобы принимающий обработчик мог также извлекать их точно так же?

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

Ответ №1:

Существует конструктор передачи данных, поэтому вы можете создать его очень легко, теперь вам просто нужно add() File добавить объект в его items список:

 const dataTransfer = new DataTransfer();
const file = new File( [ "some content" ], "text-file.txt" );
dataTransfer.items.add( file );

const event = new DragEvent( "drop", { dataTransfer } );

ondrop = (evt) => {
  const dT = evt.dataTransfer;
  console.log( dT.items[ 0 ], dT.items[ 0 ].webkitGetAsEntry() );
};

dispatchEvent( event ); 

Ответ №2:

Если кто-то хочет добиться того же — да, это возможно. Используя FileSystem API, вы можете создавать файлы в формате, который идентичен простому перетаскиванию с вашего компьютера.

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

1. Можете ли вы поделиться примером кода, чтобы этот ответ мог быть более полезным для читателей в будущем?