Показать сообщение отдельно
  #1 (permalink)  
Старый 25.11.2014, 13:48
Аспирант
Отправить личное сообщение для McLotos Посмотреть профиль Найти все сообщения от McLotos
 
Регистрация: 18.11.2010
Сообщений: 56

Drag&Drop превью
Добрый день. Подскажите как реализовать превью с кнопочками для удаления после загрузки картинок?
Есть код самой загрузки
dropzone = document.getElementById('dropbox');
maxFileSize = 100000;
dropzone.ondragover = function() {
        dropzone.style.ClassName='hover';
        console.log('ondragover');
        return false;
    };
    
    dropzone.ondragleave = function() {
        dropzone.style.ClassName='';
        console.log('ondragleave');
        return false;
    };
    dropzone.ondrop = function(event) {
        event.preventDefault();
        dropzone.style.ClassName='';
        dropzone.style.ClassName='drop';
        i=0;
        var file = event.dataTransfer.files;
        for(i=0;i<file.length;i++)
       {
        if (file[i].size > maxFileSize) {
            dropzone.innerHTML='Файл слишком большой! Размер файла: '+file[i].size+'. Разрешенный размер файла: '+maxFileSize;
            dropzone.style.ClassName='error';
            return false;
        }
       
       }
    };
    function uploadProgress(event) {
        var percent = parseInt(event.loaded / event.total * 100);
        dropzone.innerHTML = 'Загрузка: ' + percent + '%';
    }
    
    function stateChange(event) {
        if (event.target.readyState == 4) {
            if (event.target.status == 200) {
                dropzone.innerHTML='Загрузка успешно завершена!';
            } else {
                dropzone.innerHTML = 'Произошла ошибка!';
                dropzone.style.ClassName = 'error';
            }
        }
    }
Ответить с цитированием