261 Если честно, то реализация загрузки файлов в браузерах сосет плохая. Т.е. она просто работает и только.
Хуже того, на разных платформах она и выглядит по-разному. Еще добавим тот факт, что многие пользователи привыкли перетаскивать файлы, если хотят их куда-нибудь скинуть, и эта фича мало реализована или не интуитивно понятна.
К счастью, разработчик MooTools Arian Stolwijk создал для реализации Drag&Drop загрузки файлов в браузере.
Давайте посмотрим, как это работает.
HTML
Разметка HTML точно такая же, как и при обычной для загрузки файлов в браузере. Присутствуют элементы FORM и INPUT с типом file:
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<form method="post" action="mootools-upload.php" enctype="multipart/form-data" id="uploadForm"> <div> <div class="formRow"> <label for="file" class="floated">File: </label> <input type="file" id="file" name="file[]" multiple><br> </div> <div class="formRow"> <input type="submit" name="upload" value="Upload"> </div> </div> </form> |
Эта настройка будет работать даже тогда, когда у пользователя будет отключен JavaScript.
CSS
«Drop-зона» и «progress bar» области могут быть оформлены в любом стиле, какой вы пожелаете.
А CSS код для примера выглядит следующим образом:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 |
.droppable { border: #ccc 1px solid; border-radius: 8px; background: #eee; color: #666; padding: 20px; margin: 10px; clear: both; text-align: center; } .droppable.hover { background: #ddd; } .uploadList { margin: 0; padding: 0; list-style: none; } .uploadItem { overflow: hidden; border-bottom: #BCBCBC 1px solid; margin: 0 20px; padding: 3px; } .uploadItem span { overflow: hidden; width: 150px; float: left; display: block; } a.addInputRow, a.delInputRow, .uploadItem a { display: inline-block; background: url(add.png) no-repeat; height: 16px; width: 16px; text-indent: -999px; } .uploadItem a { float: left; display: block; padding-left: 20px; background-image: url(delete.png); } a.delInputRow { background-image: url(delete.png); } .progress { margin: 5px 0; height: 15px; border-radius: 3px; background: #545A74; } |
Совет: при оформлении «drop-зоны» подскажите пользователю для чего она нужна, чтобы не было вопросов.
MooTools JavaScript
Arian предоставил 3 JavaScript класса для заливки файлов:
Form.Upload: Основной рабочий класс, определяющий возможности браузера по заливке файлов и реализующий эти возможности.Form.MultiFileInput: Этот класс работает со списком файлов для загрузки.Request.File: Работает с объектомFormData, отправляет файлы и возвращает отчеты о ходе работ.
Еще один ресурс iFrameFormRequest может быть включен в том случае, если пользователь использует старый браузер.
А теперь можно заняться и Drag&Drop загрузчиком файлов:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
window.addEvent('domready', function(){ // Create the file uploader var upload = new Form.Upload('file', { dropMsg: "Drop files here", onComplete: function(){ alert('Files uploaded!'); } }); // Use iFrameFormRequest, which posts to iFrame if (!upload.isModern()) { new iFrameFormRequest('uploadForm', { onComplete: function(response){ alert('Files uploaded!'); } }); } }); |
Начнем с создания экземпляра Form.Upload, передавая ему INPUT и опции класса. Самая важная опция — onComplete. Так как она возвращает уведомление, когда файлы загружены.
Если желаете настроить загрузку по своему вкусу, например, уведомления или область прогресса, то можно обращаться неспосредственно к паре Form.MultipleFileInput и Request.File:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
// From ReadMe.md // the input element, the list (ul) and the drop zone element. var input, list, drop; // Form.MultipleFileInput instance var inputFiles = new Form.MultipleFileInput(input, list, drop, { onDragenter: drop.addClass.pass('hover', drop), onDragleave: drop.removeClass.pass('hover', drop), onDrop: drop.removeClass.pass('hover', drop) }); // Request instance; var request = new Request.File({ url: 'files.php' // onSuccess // onProgress }); myForm.addEvent('submit', function(event){ event.preventDefault(); inputFiles.getFiles().each(function(file){ request.append('url[]' , file); }); request.send(); }); |
Это решение хорошо подходит для подробных прогресс-баров.
Вот и все!
