Przeciąg i upuść wiele plików tekstowych do swojej aplikacji z HTML5 oraz JavaScript

Przeciąg i upuść wiele plików tekstowych do swojej aplikacji z HTML5 oraz JavaScript

Cześć, w tym artykule pokaże Ci jak przeciągać pliki tekstowe z systemu operacyjnego do przeglądarki, a ściślej do pola tekstowego aplikacji. Możesz użyć wszystkich dostępnych (w prostej postaci) plików tekstowych (*.txt, *.html, *.js etc). Do wykonania tej funkcjonalności potrzebny będzie index.html oraz test.txt.

Interfejs użytkownika jest prosty:

1-html5

HTML5 drag & drop daje użytkownikowi łatwy sposób na dostarczanie danych (np. w postaci plików) do przeglądarki. Dlatego w tym prostym przykładzie przeciągniemy tekstowe pliki z systemu operacyjnego do przeglądarki. Kod wygląda jak poniższe linie i oczywiście może być inspiracją (jak inne moje artykuły:) ) do eksperymentowania i dodawania nowej funkcjonalności.

     /**
     * Text area
     * @type {HTMLElement}
     */
    var dropZone = document.getElementById('drop-zone'),
        append = document.getElementById('append');

    /**
     * Set event listeners
     */
    dropZone.addEventListener('dragover', dragOver);
    dropZone.addEventListener('dragend', dragEnd);
    dropZone.addEventListener('drop', readText, false);

    function dragOver(e) {
        e.stopPropagation(); // for some browsers stop redirecting
        e.preventDefault();
        return false;
    }

    function dragEnd(e) {
        e.stopPropagation(); // for some browsers stop redirecting
        e.preventDefault();
        return false;
    }

    function readText(e) {
        e.stopPropagation(); // for some browsers stop redirecting
        e.preventDefault();

        var file,
            fileData,
            fileReader,
            files = e.dataTransfer.files;

        if (!files) {
            return;
        }

        //not append
        if(append.checked == false)
            dropZone.value = '';

        for(var i=0;i<files.length;i++)
        {
            file = files[i];

            //new instance for each file
            fileReader = new FileReader();
            fileReader.textArea = dropZone;

            fileData = function (event) {
                this.textArea.value += this.result
            };

            fileReader.addEventListener('loadend',fileData);
            fileReader.readAsText(file);
        }
    }

a) w tym przypadku obszarem do upuszczania jest text area i dodatkowo dodałem checkbox, aby pozwolić użytkownikowi dodawać zawartość do już istniejącej

b) ustawiłem nasłuch na eventy drag i drop, funkcja e.stopPropagation(); oraz e.preventDefault(); zapobiegają akcjom przeglądarki (na przykład, przeglądarka nie otworzy przeciąganego pliku w nowej zakładce)

c) ważne rzeczy są w funkcji readText.

- file - przeniesiony plik z systemu operacyjnego
- fileData – funkcja callback do zaznaczenia obszaru TextArea
- fileReader, new FileReader() - pobranie informacji o pliku
- files, e.dataTransfer.files  - tablica z pobranymi z systemu operacyjnego obiektami
- fileReader.addEventListener(‘loadend’,fileData) – listener dla callback
- fileReader.readAsText(file) – czyta plik tekstowy

Przeciągnąłem dwa pliki:

3-html5

Końcowy rezutat:

2-html5

Demo

Dzięki i do następnego.

Komentarze:

Zostaw odpowiedź

Proszę wypełnij wymagane pola aby dodać komentarz.


Drag circle to the rectangle on the right!

Wyślij