Перетащите и падение загрузки файлов в Google Chrome / Chromium и Safari?

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



поиск в Google для html5 drag-and-drop file uploading-gmail дает такие вещи, как:




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



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



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



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

678   9  

9 ответов:

предупреждение: это код совместимости для очень старых версий 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", как поведение. И элемент upload может быть скрытым слоем, пока что-то не будет перетащено на него.

такой 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 использует, но он, безусловно, работает примерно так же.

33  
2015-12-01 03:55:05

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

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

  • Chunking
  • Drag / Drop
  • PNG Resize
  • JPEG Resize
  • тип фильтрации
  • исходящий поток
  • Multipart upload
  • ограничение размера файла
  • загрузить прогресс

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

  • вспышка
  • Gears
  • HTML 5
  • Silverlight
  • BrowserPlus

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

13  
2010-06-01 20:14:04

у меня есть что-то, работающее в Chrome после долгой, долгой, долгой детективной работы. Это только работает на Chrome. На сафари он замерзает. В Firefox это не позволит мне удалить файл. Т. е. вместо открывает за файл. Даже в 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>

обработчик.php:

    // This is not a true file upload. Instead, it sends the raw data directly.
    echo htmlentities(file_get_contents('php://input'));
10  
2010-04-18 02:16:47

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

2  
2010-04-22 06:49:24

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

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

надеюсь, что это поможет некоторым.

2  
2010-09-09 23:27:46

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

Он работает с Firefox, Safari и Chrome.

2  
2010-11-08 19:44:19

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

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"

1  
2011-09-14 07:29:23

вы можете использовать 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/) просто наслаждайтесь :)

0  
2011-05-19 18:37:50

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

input type= "file" name= "file1" multiple=" multiple "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  
2014-09-15 11:34:52

Comments

    Ничего не найдено.
Click here to cancel reply.