Файл перетаскивания загружает в Google Chrome / Хром и Safari?
Загрузка файла перетаскивания может быть сделана в Firefox 3.6.
Поиск Google html5 загрузка файла перетаскивания - Gmail дает вещи как:
- Собственное Перетаскивание + загрузка файла Отбрасывания в Firefox 3.6
- http://www.appelsiini.net/2009/10/html5-drag-and-drop-multiple-file-upload
- http://www.thecssninja.com/javascript/drag-and-drop-upload
Все эти руководства использование FileReader (или Firefox 3.6's удержанный от использования getAsBinary, который никакая другая поддержка браузера, любой).
Однако Google недавно выпустил обновление для Gmail, который позволил загрузку файла перетаскивания в Хроме, а также Firefox, и Хром не имеет FileReader. Я использую последний Хром ночью, и он может файлы загрузки перетаскивать-отбрасывания, не поддерживая FileReader.
Я видел, что кто-то упоминает, что загрузка перетаскивать-отбрасывания может быть возможной путем перетаскивания на , но это может только поддерживать один файл за один раз, в то время как загрузчик Gmail может обработать несколько файлов, перетаскиваемых на него, таким образом, это ясно не, что они делают.
Таким образом, вопрос, как они делают это? Как Вы поддерживаете Хром для загрузки файла HTML5? Кроме того, можно ли поддерживать Safari?
4 ответа
ПРЕДУПРЕЖДЕНИЕ: Это код совместимости для очень старых версий Safari и Chrome. Все современные браузеры поддерживают FileReader API; вот одно руководство: https://developer.mozilla.org/en-US/docs/Using_files_from_web_applications
Этот код теперь полезен только в том случае, если по какой-то причине вам необходимо поддерживать Safari 5 и старше или Chrome 6 лет и старше.
Одна из возможностей - использовать метод, используемый в SwellJS :
Используйте следующим образом:
<form method="post" enctype="multipart/form-data" id="uploadform">
<input type="file" name="dragupload[]" multiple="multiple"
onchange="if (this.value) document.getElementById('uploadform').submit();" />
</form>
Элемент input может иметь стиль opacity: 0 и позиционироваться (абсолютно) над элементом, который принимает загрузки. Вся форма может быть помещена внутри iframe для "псевдо-Ajax" поведения. И элемент загрузки может быть слоем, скрытым до тех пор, пока что-то не будет перетаскиваться поверх него.
Такой iframe будет выглядеть так:
<script>
<!--
var entered = 0;
-->
</script>
<body ondragenter="entered++;document.getElementById('uploadelement').style.display='block'" ondragleave="entered--;if (!entered) document.getElementById('uploadelement').style.display='none'">
<form method="post" enctype="multipart/form-data" id="uploadform">
Things can be dragged and dropped here!
<input type="file" id="uploadelement" name="dragupload[]" multiple="multiple" onchange="if (this.value) { document.getElementById('uploadform').submit(); }" style="display:none;position:absolute;top:0;left:0;right:0;bottom:0;opacity:0;" />
</form>
</body>
Это должно выполняться только при обнаружении Safari или Chrome (поскольку другие браузеры не поддерживают перетаскивание на элементов) и может использоваться в сочетании с событием HTML5 drop для Firefox 3.6+.
Я не могу сказать, используется ли этот метод в Gmail, но он определенно работает.
У меня что-то работает в Chrome после долгой, большой детективной работы. Это только работает в Chrome. В Safari зависает. В Firefox он не позволяет мне сбросить файл. Вместо этого IE открывает перетащенный файл. Даже в Chrome перетаскивание по какой-то причине работает только один раз, после чего вам нужно обновить страницу. (Возможная причина этого в том, что что-то не так с обработчиками событий.)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript">
window.onload = function () {
var div = document.getElementById('div');
div.ondragenter = div.ondragover = function (e) {
e.preventDefault();
e.dataTransfer.dropEffect = 'copy';
return false;
}
div.ondrop = function (e) {
for (var i = 0; i < e.dataTransfer.files.length; i++) { // e.dataTransfer is a DataTransfer object (https://developer.mozilla.org/En/DragDrop/DataTransfer), e.dataTransfer.files is a FileList object (https://developer.mozilla.org/en/DOM/FileList)
var file = e.dataTransfer.files[i]; // file is a File object (https://developer.mozilla.org/en/DOM/File)
var xhr = new XMLHttpRequest;
xhr.open('post', 'handler.php', true);
xhr.onreadystatechange = function () {
if (this.readyState != 4)
return;
document.body.innerHTML += '<pre>' + this.responseText + '</pre>';
}
xhr.setRequestHeader('Content-Type', 'multipart/form-data');
xhr.setRequestHeader('X-File-Name', file.fileName);
xhr.setRequestHeader('X-File-Size', file.fileSize);
xhr.send(file); // For some reason sending the actual File object in Chrome works?
}
e.preventDefault();
return false;
}
}
</script>
</head>
<body>
<div id="div" style="width: 100%; height: 200px; border: 1px solid blue">Drop here</div>
</body>
</html>
handler.php:
// This is not a true file upload. Instead, it sends the raw data directly.
echo htmlentities(file_get_contents('php://input'));
Вам не нужно использовать iframe для загрузки псевдо-ajax. Chrome и Safari поддерживают загрузку XHR2 с событиями выполнения, так что вы можете делать индикаторы выполнения и т. Д.
Возможно, вас заинтересует что-нибудь, более совместимое с технологиями и браузером.
Мне кажется, что Plupload делает это хорошо, поддерживая следующие функции:
- Разделение на части
- Перетаскивание
- Изменение размера PNG
- Изменение размера JPEG
- Фильтрация типов
- ] Потоковая загрузка
- Многокомпонентная загрузка
- Ограничение размера файла
- Ход загрузки
для большинства следующих технологий:
- Flash
- Gears
- HTML 5
- Silverlight
- BrowserPlus
И да, с 27 мая 2010 г. он поддерживает перетаскивание для HTML5, запущенного в бета-версии Chrome.