jQuery Multiple File Upload Plugin

Moving the file list

Example 7 This example populates the file list in a custom element $(function(){ // wait for document to load $('#T7').MultiFile({ list: '#T7-list' }); });

This is div#T7-list - selected files will be populated here...

---

Customising the file list

Example 8 A Use a custom 'remove' image in the file list $(function(){ // wait for document to load $('#T8A').MultiFile({ STRING: { remove: '<img src="http://www.fyneworks.com/i/bin.gif" height="16" width="16" alt="x"/>' } }); });

Example 8 B Customising all list content $(function(){ // wait for document to load $('#T8B').MultiFile({ STRING: { file: '<em title="Click to remove" onclick="$(this).parent().prev().click()">$file</em>', remove: '<img src="http://www.fyneworks.com/i/bin.gif" height="16" width="16" alt="x"/>' } }); });

---

Using events

Example 9 The events available are: onFileAppend, afterFileAppend, onFileSelect, afterFileSelect, onFileRemove, afterFileRemove The arguments passed on to each event handler are: element: file element which triggered the event value: the value of the element in question master_element: the original element containing all relevant settings $(function(){ // wait for document to load $('#T9').MultiFile({ onFileRemove: function(element, value, master_element){ $('#F9-Log').append('<li>onFileRemove - '+value+'</li>') }, afterFileRemove: function(element, value, master_element){ $('#F9-Log').append('<li>afterFileRemove - '+value+'</li>') }, onFileAppend: function(element, value, master_element){ $('#F9-Log').append('<li>onFileAppend - '+value+'</li>') }, afterFileAppend: function(element, value, master_element){ $('#F9-Log').append('<li>afterFileAppend - '+value+'</li>') }, onFileSelect: function(element, value, master_element){ $('#F9-Log').append('<li>onFileSelect - '+value+'</li>') }, afterFileSelect: function(element, value, master_element){ $('#F9-Log').append('<li>afterFileSelect - '+value+'</li>') } }); });

This is div#F9-Log - selected files will be populated here...  onFileSelect - onFileAppend - afterFileAppend - afterFileSelect - onFileRemove - afterFileRemove -

---

Advanced Usage

Using your own selectors

$(function(){ // wait for document to load
                                $('#MyFileUpload').MultiFile();
                               });

Setting limit via script

$(function(){ // wait for document to load
                                $('#MyFileUpload').MultiFile(5 /*limit will be set to 5*/);
                               });

Advanced configuration

$(function(){ // wait for document to load
                                $('#MyCoolFileUpload').MultiFile({
                                 max: 5,
                                 accept: 'gif|jpg|png|bmp|swf'
                                });
                               });

Customising visible strings for multi-lingual support

$(function(){ // wait for document to load
                                $('#PortugueseFileUpload').MultiFile({
                                 STRING: {
                                  remove:'Remover',
                                  selected:'Selecionado: $file',
                                  denied:'Invalido arquivo de tipo $ext!'
                                 }
                                });
                               });

- See more at: http://www.fyneworks.com/jquery/multiple-file-upload/#sthash.R7cYZgO3.dpuf

출처 - http://www.fyneworks.com/jquery/multiple-file-upload/