Было бы очень удобно, если бы можно было вставлять изображения сюда, на Stack Exchange, вместо того, чтобы вмешиваться в диалог файла. Подобная функция была (есть?) реализована здесь, но только для браузеров Webkit.
Я разрабатывал пользовательский скрипт, который делает это. Забавно, что мне так и не удалось получить файл (который отличается из необработанных данных изображения) из буфера обмена в браузерах Webkit, а в Firefox это работает.
Решение для фаерфокса:
div.addEventListener('paste', function(event){
//I'm actually not sure what should event.originalEvent be. I copypasted this
var items = (event.clipboardData || event.originalEvent.clipboardData);
console.log("paste", items);
//Try to get a file and handle it as Blob/File
var files = items.items || items.files;
if(files.length>0) {
//Being lazy I just pick first file
var file = files[0];
//handle the File object
_this.processFile(file);
event.preventDefault();
event.cancelBubble = true;
return false;
}
});
Прежде чем у Chrome не было такой хорошей документации, как у Firefox (я имею в виду MDN), я попытался проверить, что происходит. Я скопировал файл и вставил его в Google Chrome (v39). Вот что я получаю в объекте DataTransfer в консоли:
Для справки, вот то же событие в Firefox:
Два других массива, items и types, отсутствуют в реализации Firefox. Когда я копирую текст или необработанные данные изображения, Chrome представляет их как DataTransferItem. Я понял, что лучше игнорировать те:
//Being lazy I just pick first file
var file = files[0];
//GOOGLE CHROME
if(file.getAsFile) {
console.log("DataTransferItem:", file);
//HTML or text will be handled by contenteditable div
if(file.type!="text/plain" && file.type!="text/html") {
//handle the File object
_this.processFile(file.getAsFile());
}
}
else
...
До сих пор мне никогда не приходило в голову получить что-то еще, кроме text/plain или text/html. Для них .getAsFile возвращает null.
Я нахожу модель Google Chrome немного запутанной. Это дает вам больше информации о необработанных данных (текст / необработанное изображение), доступ к которым можно получить только с помощью редактируемого содержимого div, но мне это не очень понятно.
