Блог

Мне нужно перенести все файлы, удаленные с элемента, на сервер с использованием перетаскивания HTML5. Я предоставил соответствующий js-код ниже. У меня есть сервлет на стороне сервера, который собирает файлы и помещает их в папку. Это работает нормально, если я удаляю 1 или 2 файла на странице. Но, если я удаляю 4-10 файлов, все файлы создаются на сервере, но для нескольких файлов установлено одинаковое содержимое, а содержимое некоторых файлов равно 0K.

Кто-нибудь из вас, пожалуйста, может сказать мне, как добиться правильного поведения. Мои требования аналогичны вложениям gmail!! Любое решение, которое обеспечивает последовательную загрузку файлов, очень заметно.

 /*
 *  Upload files to the server using HTML 5 Drag and drop from the folders on  your     local computer
*/

function uploader(place, status, target, show) {

// Upload image files
upload = function(file) {
    // Firefox 3.6, Chrome 6, WebKit
    if(window.FileReader) { 

        // Once the process of reading file
        this.loadEnd = function() {
            bin = reader.resu<                
            xhr = new XMLHttpRequest();
            xhr.open('POST', target '?up=true', false);
            var body = bin;
            xhr.setRequestHeader('content-type', 'multipart/form-data;');
            xhr.setRequestHeader("file-name", file.name );
            xhr.setRequestHeader("mime-type", file.type );

            // Firefox 3.6 provides a feature sendAsBinary ()
            if(xhr.sendAsBinary != null) { 
                xhr.sendAsBinary(body); 
            // Chrome 7 sends data but you must use the base64_decode on the PHP side
            } else { 
                xhr.open('POST', target '?up=trueamp;base64=true', true);
                xhr.setRequestHeader('UP-FILENAME', file.name);
                xhr.setRequestHeader('UP-SIZE', file.size);
                xhr.setRequestHeader('UP-TYPE', file.type);
                xhr.send(window.btoa(bin));
            }
            if (show) {
                var newFile  = document.createElement('div');
                newFile.innerHTML = 'Loaded : ' file.name ' size ' file.size ' B';
                document.getElementById(show).appendChild(newFile);             
            }
            if (status) {
                document.getElementById(status).innerHTML = 'Loaded : 100%<br/>Next file ...';
            }
        };

        // Loading errors
        this.loadError = function(event) {
            switch(event.target.error.code) {
                case event.target.error.NOT_FOUND_ERR:
                    document.getElementById(status).innerHTML = 'File not found!';
                break;
                case event.target.error.NOT_READABLE_ERR:
                    document.getElementById(status).innerHTML = 'File not readable!';
                break;
                case event.target.error.ABORT_ERR:
                break; 
                default:
                    document.getElementById(status).innerHTML = 'Read error.';
            }   
        };

        // Reading Progress
        this.loadProgress = function(event) {
            if (event.lengthComputable) {
                var percentage = Math.round((event.loaded * 100) / event.total);
                document.getElementById(status).innerHTML = 'Loaded : ' percentage '%';
            }               
        };

        // Preview images
        this.previewNow = function(event) {     
            bin = preview.resu<
            var img = document.createElement("img"); 
            img.className = 'addedIMG';
            img.file = file;   
            img.src = bin;
            document.getElementById(show).appendChild(img);
        };

    reader = new FileReader();
    // Firefox 3.6, WebKit
    if(reader.addEventListener) { 
        reader.addEventListener('loadend', this.loadEnd, false);
        if (status != null) 
        {
            reader.addEventListener('error', this.loadError, false);
            reader.addEventListener('progress', this.loadProgress, false);
        }

    // Chrome 7
    } else { 
        reader.onloadend = this.loadEnd;
        if (status != null) 
        {
            reader.onerror = this.loadError;
            reader.onprogress = this.loadProgress;
        }
    }
    var preview = new FileReader();
    // Firefox 3.6, WebKit
    if(preview.addEventListener) { 
        preview.addEventListener('loadend', this.previewNow, false);
    // Chrome 7 
    } else { 
        preview.onloadend = this.previewNow;
    }

    // The function that starts reading the file as a binary string
    reader.readAsBinaryString(file);

    // Preview uploaded files
    if (show) {
        preview.readAsDataURL(file);
    }

    // Safari 5 does not support FileReader
    } else {
        xhr = new XMLHttpRequest();
        xhr.open('POST', target '?up=true', true);
        xhr.setRequestHeader('UP-FILENAME', file.name);
        xhr.setRequestHeader('UP-SIZE', file.size);
        xhr.setRequestHeader('UP-TYPE', file.type);
        xhr.send(file); 

        if (status) {
            document.getElementById(status).innerHTML = 'Loaded : 100%';
        }
        if (show) {
            var newFile  = document.createElement('div');
            newFile.innerHTML = 'Loaded : ' file.name ' size ' file.size ' B';
            document.getElementById(show).appendChild(newFile);
        }   
    }               
};

// Function drop file
this.drop = function(event) {
    event.preventDefault();
    var dt = event.dataTransfer;
    var files = dt.files;
    for (var i = 0; i<files.length; i  ) {
        var file = files[i];
        upload(file);
    }
};

// The inclusion of the event listeners (DragOver and drop)

this.uploadPlace =  document.getElementById(place);
this.uploadPlace.addEventListener("dragover", function(event) {
    event.stopPropagation(); 
    event.preventDefault();
}, true);
this.uploadPlace.addEventListener("drop", this.drop, false); 

}
  

Спасибо.

Сегодня утром я потратил время на анализ одного и того же кода из html5uploader. С некоторой удачей я нашел основную причину.

Изменение reader = new FileReader(); на var reader = new FileReader(); должно решить проблему.

Бьюсь об заклад, это связано с тем, что javascripts автоматически объявляет необъявленную переменную как глобальную переменную. Это привело к повторному использованию reader переменной всеми uploade(file) вызовами, когда в браузер загружается более одного файла.

Приветствия!