Захват вставленного файла

Question

Захват вставленного файла

1

Документы Google поддерживают вставку файлов изображений в документ. То есть у вас есть файл изображения на рабочем столе, вы копируете файл, а затем Ctrl + V в Google Docs. Как он захватывает эту пасту?

Этот код работает для захвата текста и изображений (а не файлов) при вставке.

document.addEventListener('paste', function(e) {
    console.log(e)
    console.log(e.clipboardData.items.length)
    for (var item of e.clipboardData.items) {
        console.log(item)
    }

    console.log(e.clipboardData.files.length)
    for (var file of e.clipboardData.files) {
        console.log(file)
    }
});

Выход:

Текст https://i.imgur.com/B3hpQAd.png

Изображение https://i.imgur.com/3XklRHn.png

Файл изображения, скопированный с рабочего стола: https://i.imgur.com/7Vv1aTW.png

ryan 05 окт. 2018, в 02:27

Источник

Теги:

javascript

html5

clipboard

1 ответ

Ещё вопросы

Kaiido · Answer 1 · 2018-10-04T23-32-00.000Z

Вероятно, они прослушивают событие paste, которое является ClipboardEvent, и, следовательно, имеет свойство clipboardData, которое является объектом DataTransfer, из которого вы можете получить доступ к свойству файлов.

inp.onpaste = e => {
  e.preventDefault();
  const files = e.clipboardData.files;
  if (files && files.length && !files[0].type.indexOf('image')) {
    var img = document.body.appendChild(new Image());
    img.src = URL.createObjectURL(files[0]);
  }
}

<input id="inp" placeholder="paste an image file here">

Этот фрагмент не работает для меня в Firefox. (Google Docs делает). Есть идеи почему?
@ Райан, не знаю, у меня работает на FF63 на macOs, но должен работать в любом современном браузере. Какая у тебя FF версия?