Перетащите файл в Google Chrome / Chromium и Safari? - PullRequest
Новая
       19

Перетащите файл в Google Chrome / Chromium и Safari?

68 голосов
/ 17 апреля 2010

Перетаскивание файлов можно загрузить в Firefox 3.6.

Поиск Google для загрузки файла html5 путем перетаскивания -gmail дает такие вещи, как:

Во всех этих руководствах используется FileReader (или устаревшая версия Firefox 3.6 getAsBinary, которую также не поддерживает ни один другой браузер).

Однако Google недавно выпустил обновление для Gmail, которое позволяет загружать файлы с помощью перетаскивания в Chromium, а также в Firefox, а Chromium не имеет FileReader. Я использую последнюю версию Chromium каждый вечер, и она может перетаскивать загружаемые файлы, не поддерживая FileReader.

Я видел, как кто-то упоминал, что загрузка с помощью перетаскивания возможна путем перетаскивания на <input type="file" />, но он может поддерживать только один файл за раз, в то время как загрузчик Gmail может обрабатывать несколько файлов, перетаскиваемых на него, поэтому явно не то, что они делают.

Итак, вопрос в том, как они это делают? Как вы поддерживаете Chromium для загрузки файлов HTML5? Кроме того, можете ли вы поддерживать Safari?

Ответы [ 9 ]

33 голосов
/ 18 апреля 2010

ПРЕДУПРЕЖДЕНИЕ: Это код совместимости для очень старых версий Safari и Chrome. Все современные браузеры поддерживают API FileReader; вот один урок: https://developer.mozilla.org/en-US/docs/Using_files_from_web_applications

Этот код теперь полезен только в том случае, если по какой-то причине вам требуется поддержка Safari 5 и старше или Chrome 6 и старше.

Одной из возможностей является использование метода, используемого в SwellJS :

Используйте <input type="file" multiple="multiple" /> примерно так: 

<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>

Элемент ввода может быть стилизован так, чтобы иметь 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 (поскольку другие браузеры не поддерживают перетаскивание на элементы <input type="file" />) и может использоваться в сочетании с событием HTML5 drop для Firefox 3.6 +.

Я не могу сказать, использует ли Gmail этот метод, но он, безусловно, работает также.

13 голосов
/ 01 июня 2010

Вас может заинтересовать что-то более совместимое с технологиями и браузерами.

Мне кажется, что Plupload делает это хорошо, поддерживая следующие функции:

  • Чанкинг
  • Drag / Drop
  • PNG Resize
  • Изменение размера JPEG
  • Тип фильтрации
  • Потоковая загрузка
  • Multipart upload
  • ограничение размера файла
  • Процесс загрузки

для большинства следующих технологий:

  • Flash
  • Gears
  • HTML 5
  • Silverlight
  • BrowserPlus

И да, с 2010.05.27 , он поддерживает перетаскивание для HTML5, работающего на бета-версии Chrome.

10 голосов
/ 18 апреля 2010

У меня есть кое-что работающее в Chrome после долгой, очень детективной работы.Это только работает на Chrome.На Safari зависает.На Firefox это не позволит мне удалить файл.IE открывает удаленный файл вместо.Даже в Chrome, перетаскивание работает только один раз, по какой-то причине, после чего вам нужно обновить страницу.(Возможная причина этого в том, что с обработчиками событий что-то не так.) 

<code><!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 + '
';} xhr.setRequestHeader ('Content-Type', 'multipart / form-data');xhr.setRequestHeader ('X-File-Name', file.fileName);xhr.setRequestHeader ('X-File-Size', file.fileSize);xhr.send (файл);// По какой-то причине отправка фактического объекта File в Chrome работает?} e.preventDefault ();вернуть ложь;}} Напишите здесь

handler.php: 

    // This is not a true file upload. Instead, it sends the raw data directly.
    echo htmlentities(file_get_contents('php://input'));
2 голосов
/ 08 ноября 2010

Вы можете использовать библиотеку html5uploader: http://code.google.com/p/html5uploader/

Работает с Firefox, Safari и Chrome.

2 голосов
/ 10 сентября 2010

Для нашего собственного приложения мы перетаскиваем только FireFox. Мы возвращаемся к традиционной загрузке iframe для других. Чтобы определить, что перетаскивание поддерживается, мы запускаем этот код: 

if (typeof(window.File) == 'object' && typeof(window.FileReader) == 'function' && typeof(window.FileList) == 'object') {
   // DnD is supported!
}

Надеюсь, это полезно для некоторых.

2 голосов
/ 22 апреля 2010

Вам не нужно использовать iframe для загрузки псевдо-AJAX. Chrome и Safari поддерживают XHR2-загрузки с событиями прогресса, поэтому вы можете выполнять индикаторы выполнения и т. Д.

1 голос
/ 14 сентября 2011

Последний браузер поддерживает файл загрузки хорошо. Вы можете использовать: 

xhr = new XMLHttpRequest();     
xhr.open('POST', targetPHP, true);
var formData = new FormData();
formData.append('upload',file);
xhr.send(formData);

Вам не нужно устанавливать границу или какую-либо головку - просто так все работает нормально Я проверил этот код в клиент: Firefox 6.02 и Chrome 13. сервер: tomcat с "spring mvc"

0 голосов
/ 15 сентября 2014

Установить несколько атрибутов, например:

input type = "file" name = "file1" множественный = "множественный" class = "DropHere"

и используйте этот класс CSS DropHere: 

.DropHere
{
    height: 100px;
    padding: 3px;
    border: 2px dashed #555;
    border-radius: 5px;
    cursor: default;
    background-image:url("data:image/svg+xml;utf8, <svg xmlns='http://www.w3.org/2000/svg' version='1.1' height='100px' width='220px'><text x='55' y='75' font-size='20'>or drop files here</text></svg>");
    background-repeat: no-repeat;
}

Поле файла теперь будет выглядеть так:

The file will now look like

Если вы используете asp.net, вам также может понравиться эта статья, которую я написал «Загрузка нескольких файлов с индикатором выполнения и перетаскиванием»: http://www.codeproject.com/Articles/818561/Multiple-file-upload-with-progress-bar-and-drag-an

0 голосов
/ 27 ноября 2010

вы можете использовать FormData для сохранения файла, а затем загрузить его. например, 

function setUp(){
  var dropContainer = document.getElementById("container");
  dropContainer.addEventListener("drop",dropHandler,false);
  dropContainer.addEventListener("dragenter", function(event){event.stopPropagation();event.preventDefault();}, false);
  dropContainer.addEventListener("dragover", function(event){event.stopPropagation();event.preventDefault();}, false);
  dropContainer.addEventListener("drop", dropHandler, false);
  getResult()
}
function dropHandler(event){
  var files = event.dataTransfer.files;
  var count = files.length;
  form = new FormData();
  for(var i= 0;i<count;i++){
    form.append("file"+i, files[i]);
  }
  sendData();
}
function sendData(){
  var xhr = new XMLHttpRequest();  
  xhr.upload.addEventListener("progress", uploadProgress, false);  
  xhr.addEventListener("load", uploadComplete, false);
  xhr.addEventListener("error", uploadFailed, false);  
  xhr.open("POST", "/upload");
  xhr.send(form);
  var progressBar = document.getElementById('progressBar');
  progressBar.style.display = 'block';
  progressBar.style.width = '0px';
}

демо здесь (http://flexinnerp.appspot.com/) просто наслаждайтесь:)

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...