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'; } } } |
После загрузки куда - в форму или на сервер?
Вариант 2 - с сервера приходит хтмл со всеми src и кнопочками. Вариант 1 - в браузере делаются тумбы из канваса. В терминах отправки формы удалить можно только все файлы висящие на данной кнопке. По-отдельности удалить нельзя. Или на каждый файл надо делать кнопку file и таскать по-одному. |
Вариант 2, вместо
dropzone.innerHTML='Загрузка успешно завершена!'; должен прийти html или json с сервера и dropzone.innerHTML=link.responseText; // например |
Можно, пользуясь случаем, еще раз задать вопрос по драгу тем, кто его делает? Спасибо.
Вопрос такой: с чего вы решили что драг будет работать даже если код рабочий? Чтобы сделать драг-н-дроп требуется 2 окна расположенных рядом. Нормальный юзер даже не знает где у окна кнопка уменьшения размеров, нормальный юзер никогда не уменьшит окно меньше чем на весь экран, а если его заставить - то будет испытывать невероятный дискомфорт. Я к тому, что не надо тратить силы и время на эту фичу вообще. Ни один нормальный юзер ей не воспользуется никогда. |
Часовой пояс GMT +3, время: 15:01. |