HTML5, JavaScript: перетаскивание файла из внешнего окна (проводник Windows)

Могу ли я попросить хороший рабочий пример реализации HTML5 Drag and Drop? Исходный код должен работать, если перетаскивание выполняется из внешнего приложения (проводника Windows) в окно браузера. Он должен работать как можно больше браузеров.

Я хотел бы попросить образец кода с хорошим объяснением. Я не хочу использовать сторонние библиотеки, так как мне нужно будет изменить код в соответствии с моими потребностями. Код должен быть основан на HTML5 и JavaScript. Я не хочу использовать JQuery.

Я потратил целый день на поиск хорошего материала, но, к удивлению, я не нашел ничего хорошего. Примеры, которые я нашел, работали для Mozilla, но не работали в Chrome.

Ответ 1

Эта ссылка объясняет мой вопрос довольно подробно:

http://www.html5rocks.com/en/tutorials/file/dndfiles/

Ответ 2

Вот простой пример. Он показывает красный квадрат. Если вы перетащите изображение по красному квадрату, оно добавляет его в тело. Я подтвердил, что он работает в IE11, Chrome 38 и Firefox 32. Для более подробного объяснения см. Статью Html5Rocks.

var dropZone = document.getElementById('dropZone');

// Optional.   Show the copy icon when dragging over.  Seems to only work for chrome.
dropZone.addEventListener('dragover', function(e) {
    e.stopPropagation();
    e.preventDefault();
    e.dataTransfer.dropEffect = 'copy';
});

// Get file data on drop
dropZone.addEventListener('drop', function(e) {
    e.stopPropagation();
    e.preventDefault();
    var files = e.dataTransfer.files; // Array of all files

    for (var i=0, file; file=files[i]; i++) {
        if (file.type.match(/image.*/)) {
            var reader = new FileReader();

            reader.onload = function(e2) {
                // finished reading file data.
                var img = document.createElement('img');
                img.src= e2.target.result;
                document.body.appendChild(img);
            }

            reader.readAsDataURL(file); // start reading the file data.
        }
    }
});

<div id="dropZone" style="width: 100px; height: 100px; background-color: red"></div>

Ответ 3

Посмотрите на событие ondragover. Вы можете просто иметь внутреннюю часть div, которая скрыта до тех пор, пока событие ondragover не вызовет функцию, которая покажет div с ней, таким образом позволяя пользователю перетащить файл. Наличие объявления onchange в этом случае позволит вам автоматически вызывать функцию (например, upload), когда файл добавляется на вход. Убедитесь, что вход позволяет использовать несколько файлов, так как вы не можете контролировать, сколько они попытаются перетащить в браузер.

Ответ 4

Принятый ответ дает отличную ссылку на эту тему; однако, согласно правилам SO, следует избегать чистых ссылок, поскольку они могут исчезнуть в любое время. По этой причине я нашел время, чтобы подвести итог содержания ссылки для будущих читателей.

Начиная

Перед внедрением метода загрузки файлов на ваш веб-сайт вы должны убедиться, что браузеры, которые вы выбираете для поддержки, будут в состоянии полностью поддерживать File API. Вы можете проверить это быстро с помощью фрагмента Javascript ниже:

// Check for the various File API support.
if (window.File && window.FileReader && window.FileList && window.Blob) {
  // Great success! All the File APIs are supported.
} else {
  alert('The File APIs are not fully supported in this browser.');
}

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

Форма ввода

Самый распространенный способ загрузки файла - использовать стандартный элемент <input type="file">. JavaScript возвращает список выбранных объектов File в виде FileList.

  function handleFileSelect(evt) {
    var files = evt.target.files; // FileList object

    // files is a FileList of File objects. List some properties.
    var output = [];
    for (var i = 0, f; f = files[i]; i++) {
      output.push('<li><strong>', escape(f.name), '</strong> (', f.type || 'n/a', ') - ',
                  f.size, ' bytes, last modified: ',
                  f.lastModifiedDate ? f.lastModifiedDate.toLocaleDateString() : 'n/a',
                  '</li>');
    }
    document.getElementById('list').innerHTML = '<ul>' + output.join('') + '</ul>';
  }

  document.getElementById('files').addEventListener('change', handleFileSelect, false);

<input type="file" id="files" name="files[]" multiple />
<output id="list"></output>