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

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

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

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

26
drag-and-drop draggable html5 javascript

3 ответов

вот простой пример. На ней изображен красный квадрат. При перетаскивании изображения по Красному квадрату оно добавляется к телу. Я подтвердил, что он работает в 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>
68

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

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

14

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

2