T.M. SoftStudio

feci quod potui, faciant meliora potentes

Загрузка файлов в браузере IE с плагином jQuery Multiple File Upload Plugin

 

В браузере IE существуют проблемы с организацией множественного выбора файлов для загрузки на сервер с помощью тэга <input type="file"/> и предпросмотром загружаемых файлов (изображений), так как браузер IE не поддерживает такие HTML5-опции как атрибут multiple тэга <input type="file" multiple="multiple" name="files[]"> и программный интерфейс File API.

Поэтому для организации загрузки файлов в браузере IE будет полезен плагин jQuery Multiple File Upload Plugin (http://www.fyneworks.com/jquery/multiple-file-upload/).

 

Для использования данного плагина его необходимо скачать, включить его в страницу и добавить класс multi в элемент input:

<script type="text/javascript" src="/scripts/jquery-1.7.2.min.js"></script>

<script src="/scripts/jquery.MultiFile.js" type="text/javascript"></script>

<input type="file" class="multi"/>

В результате с помощью элемента input можно будет выбирать файлы, название которых будет отображаться, с возможностью их удаления из списка загрузки:

Загрузка всех выбранных таким образом файлов начнется при нажатии кнопки <input type="submit" /> формы загрузчика input.

Для того чтобы добавляемые файлы отображались в нужном блоке, примерно в строку 160 файла jquery.MultiFile.js нужно добавить код:

MultiFile.list.appendTo('#id_div');

Для определения своей кнопки удаления выбранного файла из списка загрузки в строке 300 файла jquery.MultiFile.js нужно изменить код:

b = $('<a class="MultiFile-remove" href="#'+MultiFile.wrapID+'"><img src="/img/btn_remove.jpg" alt=""></a>');

В результате вместо крестика будет отображаться изображение кнопки.

Для добавления дополнительных элементов в списке загрузки нужно изменить код строки 299:

a = $('<span class="MultiFile-title" title="'+MultiFile.STRING.selected.replace('$file', v)+'"><label>'+MultiFile.STRING.file.replace('$file', v.match(/[^\/\\]+$/gi)[0])+'</label><img src="/img/btn_adds_upload.jpg" alt="" style="padding-left:10px;"></span>'),

Ниже строки 306 можно определить обработчики добавленных элементов.

Для полной очистки списка загрузки можно использовать:

$('.MultiFile-remove').click();