jquery-multifile

<!DOCTYPE html><html><head><meta http-equiv="content-type" content="text/html; charset=UTF-8"><meta charset="utf-8"><title>jQuery MultiFile v2.2.2</title><meta name="viewport" content="width=device-width, initial-scale=1.0"><link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/bootswatch/3.1.1-1/css/custom/bootstrap.min.css"><link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/smoothness/jquery-ui.css"><link rel="stylesheet" href="docs.css"><script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script><script src="http://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script><script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.1.1/js/bootstrap.min.js"></script><link rel="stylesheet" href="http://prismjs.com/themes/prism.css"><script src="http://prismjs.com/prism.js"></script><script src="docs.js"></script></head><body><div role="navigation" class="navbar navbar-default navbar-fixed-top navbar-static-top"><div class="container"><div class="navbar-header"><button type="button" data-toggle="collapse" data-target=".navbar-collapse" class="navbar-toggle"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button><a href="./" class="navbar-brand">jQuery MultiFile</a></div><div class="navbar-collapse collapse"><ul class="nav navbar-nav"><li><a href="#Usage" id="#btn-Usage">Usage</a></li><li><a href="#Advanced" id="#btn-Advanced">Advanced</a></li><li><a href="#Customize" id="#btn-Customize">Customize</a></li><li><a href="#Events" id="#btn-Events">Events</a></li><li><a href="#Locale" id="#btn-Locale">Locale</a></li><li><a href="#Install" id="#btn-Install">Install</a></li><li><a href="#Support" id="#btn-Support">Support</a></li><li><a href="#Credit" id="#btn-Credit">Credit</a></li></ul></div></div></div><div class="container"><div class="jumbotron"><h1>jQuery MultiFile</h1><p>The <strong>unopinionated</strong> way to implement file selection.</p></div></div><div class="container"><div class="Clear" id="body"> <div class="container clear section"> <div class="row"> <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4"> <h3>What <span style="color:green;">this is</span> </h3> <p> This <strong>jQuery Multiple File Selection Plugin</strong> (<code>$.MultiFile</code>) is a non-obtrusive plugin for <a href="http://www.jquery.com/">jQuery</a> that helps users easily <strong>select multiple files</strong> for upload. It lets you apply some basic restrictions/validation so you can easily <strong>reject files before they're uploaded</strong> based on their extension or size <strong>before they're uploaded</strong>. </p> </div> <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4"> <h3>What <span style="color:red;">this isn't</span></h3> <p> <strong class="warning">This is not a file upload tool</strong>. Uploading files require <strong>server-side integration</strong> and <strong>security considerations</strong> this project will never support. We can recommend <a href="http://www.uploadify.com/" target="_blank">many</a>, <a href="http://www.plupload.com/" target="_blank">many</a>, <strong><a href="http://blueimp.github.io/jQuery-File-Upload/" target="_blank">many</a> </strong> great tools if you're looking for a complete upload solution. But if you don't already manage your own server-side integration, or if you have no idea what I'm talking about, then this plugin is not for you. </p> </div> <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4"> <h3>What's new?</h3> <p> <strong>A fresh start... <em>ish</em> </strong>: This project started a a very long time ago... and it's been dormant since 2009! Support has been shockingly bad, we admit, but we would like to engage more actively with our users and the jQuery community from now on. So as of April 2014, we've left <a href="https://code.google.com/p/jquery-fyneworks/" target="_blank">Google Code</a> behind and will be starting a fresh project on <a target="_blank" href="https://github.com/fyneworks/multifile">GitHub</a>. Our other projects (<a href="http://www.fyneworks.com/jquery/star-rating">Star Rating</a> & <a href="http://www.fyneworks.com/jquery/CKEditor">CKEditor</a> will follow shortly). We very much encourage and would love you all to report issues, contribue and discuss this project on <a target="_blank" href="https://github.com/fyneworks/multifile">GitHub</a>. </p> </div> </div> <h3>Getting started</h3> <div class="row example"> <div class="col-md-8"> <p> Just add the <code><strong>multi</strong></code> class to your file input element. </p> <pre><code class="language-markup"><input type="file" class="multi"/></code></pre> </div> <div class="col-md-4"> <input type="file" multiple="multiple" class="multi" multiple="multiple" /> </div> </div> <div class="row example"> <div class="col-md-8"> <p> Use the <code><strong>maxlength</strong></code> property if you want to limit the number of files selected. </p> <pre><code class="language-markup"><input type="file" class="multi" maxlength="2"/></code></pre> </div> <div class="col-md-4"> <input type="file" multiple="multiple" class="multi" maxlength="2" /> </div> </div> <div class="row example"> <div class="col-md-8"> <p> Use the <code><strong>accept</strong></code> property if you only want files of a certain extension to be selected. <br/> Separate valid extensions with a "|", like this: "jpg|gif|png". </p> <pre><code class="language-markup"><input type="file" class="multi" accept="gif|jpg"/></code></pre> </div> <div class="col-md-4"> <input type="file" multiple="multiple" class="multi" accept="gif|jpg" /> </div> </div> <div class="row example"> <div class="col-md-8"> NB.: <span style="font-weight:bold; color:red;">server-side validation is always required</span> </div> </div> </div> <div class="container clear section" id="Usage"> <h2>Usage Examples</h2> <div class="example"> <h3>Using Attributes</h3> <div class="row"> <div class="col-md-12"> <p>The easiest way to get started is to add <code>class="multi"</code> and modify the attributes of your element</p> </div> </div> <div class="row"> <div class="col-md-4"> <fieldset style="border:0"> <legend> <strong>Example 1</strong> </legend> <p>Use <code>maxlength</code> to limit the number of files selected</p> <pre><code class="language-markup"><input class="multi" maxlength="2" /></code></pre> <div class="P5 B"> Limit: 2 files. <br/>Allowed extensions: any. </div> <form action="" class="P10"> <input type="file" multiple="multiple" class="multi" maxlength="2" /> </form> </fieldset> </div> <div class="col-md-4"> <fieldset style="border:0"> <legend> <strong>Example 2</strong> </legend> <p>Use <code>accept</code> to limit the extensions allowed</p> <pre><code class="language-markup"><input class="multi" accept="gif|jpg" /></code></pre> <div class="P5 B"> Limit: no limit. <br/>Allowed extensions: gif and jpg. </div> <form action="" class="P10"> <input type="file" multiple="multiple" class="multi" accept="gif|jpg" /> </form> </fieldset> </div> <div class="col-md-4"> <fieldset style="border:0"> <legend> <strong>Example 3</strong> </legend> <p>Use <code>maxlength</code> and <code>accept</code> combined</p> <pre><code class="language-markup"><input class="multi" accept="gif|jpg" maxlength="3" /></code></pre> <div class="P5 B"> Limit: 3 files <br/>Allowed extensions: gif, jpg. </div> <form action="" class="P10"> <input type="file" multiple="multiple" class="multi" accept="gif|jpg" maxlength="3" /> </form> <div class="P5 Warning Bold"> Note that server-side validation is always required </div> </fieldset> </div> </div> </div> <div class="example"> <h3>Using the <code>class</code> property</h3> <div class="row"> <div class="col-md-12"> <p>There is a way to configure the plugin via the <code>class</code> property, without any knowledge of javascript</p> </div> </div> <div class="row"> <div class="col-md-4"> <fieldset style="border:0"> <legend> <strong>Example 4</strong> </legend> <pre><code class="language-markup"><input class=" multi max-3 "/></code></pre> <div class="P5 B"> Limit: 3 files. <br/>Allowed extensions: any. </div> <form action="" class="P10"> <input type="file" multiple="multiple" class="multi max-3" /> </form> </fieldset> </div> <div class="col-md-4"> <fieldset style="border:0"> <legend> <strong>Example 5</strong> </legend> <pre><code class="language-markup"><input class=" multi accept-gif|jpg "/></code></pre> <div class="P5 B"> Limit: no limit. <br/>Allowed extensions: gif, jpg. </div> <form action="" class="P10"> <input type="file" multiple="multiple" class="multi accept-gif|jpg" /> </form> </fieldset> </div> <div class="col-md-4"> <fieldset style="border:0"> <legend> <strong>Example 6</strong> </legend> <pre><code class="language-markup"><input class=" multi max-3 accept-gif|jpg maxsize-1024 "/></code></pre> <div class="P5 B"> Limit: 3 files <br/>Allowed extensions: gif, jpg. <br/>Max payload: 1MB (1024 bytes) </div> <form action="" class="P10"> <input type="file" multiple="multiple" class="multi max-3 accept-gif|jpg maxsize-1024" /> </form> <div class="P5 Warning Bold"> Note that server-side validation is always required </div> </fieldset> </div> </div> </div> <div class="example"> <h3>Selecting many files at once (HTML5)</h3> <div class="row"> <div class="col-md-12"> <p>So far, each of the example above has only enabled you to select one file at a time. To select multiple files at once, just use HTML5's <code>multiple</code> attribute (<a href="http://www.w3schools.com/tags/att_input_multiple.asp">1</a>, <a href="http://www.w3.org/TR/2012/WD-html5-20121025/common-input-element-attributes.html#attr-input-multiple">2</a>)</p> </div> </div> <div class="row"> <div class="col-md-4"> <fieldset style="border:0"> <legend> <strong>Example 7</strong> </legend> <pre><code class="language-markup"><input multiple class="multi" maxlength="10" /></code></pre> <div class="P5 B"> Limit: 10 files. <br/>Allowed extensions: any. </div> <form action="" class="P10"> <input type="file" multiple="multiple" class="multi" maxlength="10"/> </form> </fieldset> </div> <div class="col-md-4"> <fieldset style="border:0"> <legend> <strong>Example 8</strong> </legend> <pre><code class="language-markup"><input multiple class="multi" accept="gif|jpg|png" /></code></pre> <div class="P5 B"> Limit: no limit. <br/>Allowed extensions: gif, jpg. </div> <form action="" class="P10"> <input type="file" multiple="multiple" class="multi" accept="gif|jpg|png"/> </form> </fieldset> </div> <div class="col-md-4"> <fieldset style="border:0"> <legend> <strong>Example 9</strong> </legend> <pre><code class="language-markup"><input multiple class="multi" maxlength="10" accept="gif|jpg|png" /></code></pre> <div class="P5 B"> Limit: 10 files <br/>Allowed extensions: gif, jpg, png. </div> <form action="" class="P10"> <input type="file" multiple="multiple" class="multi" maxlength="10" accept="gif|jpg|png"/> </form> <div class="P5 Warning Bold"> Note that server-side validation is always required </div> </fieldset> </div> </div> </div> <div class="example"> <h3>Validating Sizes</h3> <div class="row"> <div class="col-md-12"> <p>It's common to validate the size of the files being selected prior to upload.</p> </div> </div> <div class="row"> <div class="col-md-4"> <fieldset style="border:0"> <legend> <strong>Example 10a</strong> </legend> <p>Using class <code>maxsize-*</code> (* = max size in kb)</code></p> <pre><code class="language-markup"><input multiple class="multi maxsize-5120" /></code></pre> <div class="P5 B"> Limit: any number of files <br/>Allowed extensions: any. <br/>Max payload: 5MB </div> <form action="" class="P10"> <input type="file" multiple="multiple" class="multi maxsize-5120"/> </form> </fieldset> </div> <div class="col-md-4"> <fieldset style="border:0"> <legend> <strong>Example 10b</strong> </legend> <p>Using <code>data-maxsize</code> attribute (max size in kb)</p> <pre><code class="language-markup"><input multiple class="multi" maxlength="3" data-<strong>maxsize</strong>="1024" /></code></pre> <div class="P5 B"> Limit: 3 files (under <1MB <strong>in total</strong>) </div> <form action="" class="P10"> <input type="file" multiple="multiple" class="multi" maxlength="3" data-maxsize="1024" /> </form> </fieldset> </div> <div class="col-md-4"> <fieldset style="border:0"> <legend> <strong>Example 10c</strong> </legend> <p>Use <code>data-maxfile</code> to validate individual files</p> <pre><code class="language-markup"><input multiple class="multi" maxlength="3" data-<strong>maxfile</strong>="1024" /></code></pre> <div class="P5 B"> Limit: 3 files (under <1MB <strong>each</strong>) </div> <form action="" class="P10"> <input type="file" multiple="multiple" class="multi" maxlength="3" data-maxfile="1024" /> </form> <div class="P5 Warning Bold"> Note that server-side validation is always required </div> </fieldset> </div> </div> <div class="example"> <h3>With an Image Preview</h3> <div class="row"> <div class="col-md-12"> <p>There's an easy way to add a preview of the image being uploaded</p> </div> </div> <div class="row"> <div class="col-md-4"> <fieldset style="border:0"> <legend> <strong>Example 11a</strong> </legend> <p>Using class <code>with-preview</code></p> <pre><code class="language-markup"><input multiple class="multi with-preview" /></code></pre> <form action="" class="P10"> <input type="file" multiple="multiple" class="multi with-preview"/> </form> </fieldset> </div> </div> </div> <div class="container clear section" id="Advanced"> <h2>Advanced Examples</h2> <div class="row"> <div class="col-md-12"> <div style="margin:10px 0; background-color:#ececec color:#f00; padding:10px; border:#ccc dotted 1px; color:#f00; font-weight:bold;"> IMPORTANT: Don't use <code>class="multi"</code> if you use any of the examples below this point. </div> </div> <div class="col-md-12"> <p> If you use <code><strong>class="multi"</strong></code> the plugin will be initialised automatically (taking precedence over your code). </p> <p> You must invoke the plugin with your own selector when you use any of the examples below. </p> </div> <div class="col-md-6"> Something like <pre><code class="language-markup"><input type="file" class="<strong>this-is-your-class</strong>" /></code></pre>. </div> <div class="col-md-6"> Followed by <pre><code class="language-javascript">// this is your code $(function(){ // wait for page to load // this is your selector $('input.<strong>this-is-your-class</strong>').MultiFile({ // your options go here max: 2, accept: 'jpg|png|gif' }); });</code></pre> </p> </div> </div> <div class="example"> <div class="row"> <div class="col-md-4"> <h3>Setting limit via script</h3> <pre><code class="language-markup"><input multiple type="file" id="UpTo3Files"/></code></pre> <pre><code class="language-javascript">// wait for document to load $(function(){ // up to 3 files can be selected // invoke plugin $('#UpTo3Files').MultiFile(5); // if you send in a number the plugin // will treat it as the file limit });</code></pre> <div> Try it: <input multiple type="file" id="UpTo3Files"/> <script>$(function(){ // up to 5 files can be selected // invoke plugin $('#UpTo3Files').MultiFile(3); // if you send in a number the plugin // will treat it as the file limit });</script> </div> </div> <div class="col-md-4"> <h3>Limit and Extension Filter</h3> <pre><code class="language-markup"><input multiple type="file" id="UpTo3Images"/></code></pre> <pre><code class="language-javascript">// wait for document to load $(function(){ // up to 3 files can be selected // only images are allowed // invoke plugin $('#UpTo3Images').MultiFile({ max: 3, accept: 'gif|jpg|png' }); });</code></pre> <div> Try it: <input multiple type="file" id="UpTo3Images"/> <script>$(function(){ // up to 5 files can be selected // only images are allowed // invoke plugin $('#UpTo3Images').MultiFile({ max: 3, accept: 'gif|jpg|png' }); });</script> </div> </div> <div class="col-md-4"> <h3>Multi-lingual support</h3> <pre><code class="language-markup"><input multiple type="file" id="EmPortugues"/></code></pre> <pre><code class="language-javascript">// wait for document to load $(function(){ // use a different language // $file prints the file name // $ext prints the file extension // invoke plugin $('#EmPortugues').MultiFile({ max: 3, accept: 'gif|jpg|png' STRING: { remove:'Remover', selected:'Selecionado: $file', denied:'Invalido arquivo de tipo $ext!' } }); });</code></pre> <div> Try it: <input multiple type="file" id="EmPortugues"/> <script>$(function(){ // use a different lanague // $file prints the file name // $ext prints the file extension // invoke plugin $('#EmPortugues').MultiFile({ max: 3, accept: 'gif|jpg|png', STRING: { remove:'Remover', selected:'Selecionado: $file', denied:'Invalido arquivo de tipo $ext!' } }); });</script> </div> </div> </div> </div> <div class="example"> <h3>Moving the file list</h3> <div class="row"> <div class="col-md-8"> <fieldset style="border:0">  <p>This example populates the file list in a custom element</p> <pre><code class="language-javascript">$(function() { // wait for document to load $('#T7').MultiFile({ list: '#T7-list' }); });</code></pre> <script type="text/javascript" language="javascript"> $(function() { // wait for document to load $('#T7').MultiFile({ list: '#T7-list' }); }); </script> </fieldset> </div> <div class="col-md-4"> <form action="" class="P10"> <input type="file" id="T7" /> </form> <div id="T7-list" style="border:#999 solid 3px; padding:10px;"> This is div#T7-list - selected files will be populated here... <br/> <br/> </div> </div> </div> </div> <div class="example" id="Customize"> <h3>Customising the file list</h3> <div class="row"> <div class="col-md-8"> <fieldset style="border:0">  <p>Use a custom 'remove' image in the file list</p> <pre><code class="language-javascript">$(function() { // wait for document to load $('#T8A').MultiFile({ STRING: { remove: '<img src="/i/bin.gif" height="16" width="16" alt="x"/>' } }); });</code></pre> <script type="text/javascript" language="javascript"> $(function() { // wait for document to load $('#T8A').MultiFile({ STRING: { remove: '<img src="/i/bin.gif" height="16" width="16" alt="x"/>' } }); }); </script> </fieldset> </div> <div class="col-md-4"> <form action="" class="P10"> <input type="file" id="T8A" /> </form> </div> </div> </div> <div class="example"> <div class="row"> <div class="col-md-8"> <fieldset style="border:0">  <p>Customising all list content</p> <pre><code class="language-javascript">$(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="/i/bin.gif" height="16" width="16" alt="x"/>' } }); });</code></pre> <script type="text/javascript" language="javascript"> $(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="/i/bin.gif" height="16" width="16" alt="x"/>' } }); }); </script> </fieldset> </div> <div class="col-md-4"> <form action="" class="P10"> <input type="file" id="T8B" /> </form> </div> </div> </div> <div class="example" id="Events"> <h3>Using events</h3> <div class="container"> <div class="row"> <div class="col-md-6"> <p> The arguments passed on to each event handler are: <br/>element: file element which triggered the event <br/>value: the value of the element in question <br/>master_element: the original element containing all relevant settings </p> </div> <div class="col-md-3"> <p> Selection events: <ul> <li>onFileAppend</li> <li>afterFileAppend</li> <li>onFileSelect</li> <li>afterFileSelect</li> <li>onFileRemove</li> <li>afterFileRemove</li> </ul> </p> </div> <div class="col-md-3"> <p> Validation events: <ul> <li>onFileDuplicate</li> <li>onFileInvalid</li> <li>onFileTooMany</li> <li>onFileTooBig</li> <li>onFileTooMuch</li> </ul> </p> </div> </div> <div class="row"> <div class="col-md-6"> <fieldset style="border:0">  <pre><code class="language-markup"><input multiple type="file" id="WithEvents"/></code></pre> <pre><code class="language-javascript">// wait for document to load $(function(){ // 2 jpgs under 100kb only $('#WithEvents').MultiFile({ max: 2, max_size: 100, accept: 'jpg|png|gif', 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>') }, onFileInvalid: function(element, value, master_element) { $('#F9-Log').append('<li>onFileInvalid - ' + value + '</li>') }, onFileDuplicate: function(element, value, master_element) { $('#F9-Log').append('<li>onFileDuplicate - ' + value + '</li>') }, onFileTooMany: function(element, value, master_element) { $('#F9-Log').append('<li>onFileTooMany - ' + value + '</li>') }, onFileTooBig: function(element, value, master_element) { $('#F9-Log').append('<li>onFileTooBig - ' + value + '</li>') }, onFileTooMuch: function(element, value, master_element) { $('#F9-Log').append('<li>onFileTooMuch - ' + value + '</li>') } }); });</code></pre> <script type="text/javascript" language="javascript"> $(function() { // wait for document to load $('#WithEvents').MultiFile({ max: 2, max_size: 100, accept: 'jpg|png|gif', 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>') }, onFileInvalid: function(element, value, master_element) { $('#F9-Log').append('<li>onFileInvalid - ' + value + '</li>') }, onFileDuplicate: function(element, value, master_element) { $('#F9-Log').append('<li>onFileDuplicate - ' + value + '</li>') }, onFileTooMany: function(element, value, master_element) { $('#F9-Log').append('<li>onFileTooMany - ' + value + '</li>') }, onFileTooBig: function(element, value, master_element) { $('#F9-Log').append('<li>onFileTooBig - ' + value + '</li>') } }); }); </script> </fieldset> </div> <div class="col-md-6"> <form action="" class="P10"> <input multiple type="file" id="WithEvents" /> </form> <div style="border:#999 solid 3px; padding:10px;"> This is div#F9-Log - selected files will be populated here... <br/> <ul id="F9-Log"> </ul> </div> </div> </div> </div> </div> </div> </div> </div>  <div class="container clear section" id="Locale"> <h2>Multi-lingual support</h2> <p> The plugin doesn't have any additional languages built-in, but it's very easy to customise the messages to any language of your choosing. See the examples below... </p> <p> NB.: This example has been configured to accept gif/pg files only in order to demonstrate the error messages. </p> <form action="" class="P10"> <input type="file" multiple="multiple" class="multi {accept:'gif|jpg', max:3, STRING: {remove:'Remover',selected:'Selecionado: $file',denied:'Invalido arquivo de tipo $ext!',duplicate:'Arquivo ja selecionado:\n$file!'}}" /> </form> <h3>Method 1: Using class property (requires the MetaData plugin)</h3> <pre><code class="language-markup"><input type="file" class="multi { accept:'gif|jpg', max:3, STRING:{ remove:'Remover', selected:'Selecionado: $file', denied:'Invalido arquivo de tipo $ext!', duplicate:'Arquivo ja selecionado:\n$file!' } }" /></code></pre> <h3>Method 2: Programatically by ID (ONE element only, does not require MetaData plugin)</h3> <pre><code class="language-markup"><input type="file" id="PortugueseFileUpload" /></code></pre> <pre><code class="language-javascript">$(function(){ $('#PortugueseFileUpload').MultiFile({ accept:'gif|jpg', max:3, STRING: { remove:'Remover', selected:'Selecionado: $file', denied:'Invalido arquivo de tipo $ext!', duplicate:'Arquivo ja selecionado:\n$file!' } }); });</code></pre> <h3>Method 3: Programatically ( <em>n</em> emlements, does not require MetaData plugin)</h3> <a target="_blank" href="http://plugins.jquery.com/node/1251">See this feature request for details</a> <br/> <pre><code class="language-markup"><input type="file" class="multi-pt" /> <input type="file" class="multi-pt" /> <input type="file" class="multi-pt" /></code></pre> <pre><code class="language-javascript">$(function(){ $('.multi-pt').MultiFile({ accept:'gif|jpg', max:3, STRING: { remove:'Remover', selected:'Selecionado: $file', denied:'Invalido arquivo de tipo $ext!', duplicate:'Arquivo ja selecionado:\n$file!' } }); });</code></pre> </div> <div class="container clear section" id="Install"> <h2>Installation</h2> <h3>Requirements</h3> <p>You'll need <a href="http://jquery.com/" target="_blank">jQuery</a>, we recommend using <a href="https://developers.google.com/speed/libraries/devguide#jquery" target="_blank">Google Hosted Libraries</a>.</p> <pre><code class="language-markup"><script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js" type="text/javascript" language="javascript"></script></code></pre> <h3>The plugin</h3> <p> Either <a href="https://github.com/fyneworks/multifile/archive/master.zip">download</a> the latest version and host it on your own server </p> <pre><code class="language-markup"><script src="path/to/your/jquery.MultiFile.js" type="text/javascript" language="javascript"></script></code></pre> <p> <strong>OR</strong> if you like living <a href="https://www.youtube.com/watch?v=Z0o6hQLcSRc">on the edge</a>, hotlink the latest release directly from <a target="_blank" href="https://github.com/fyneworks/multifile/blob/master/jquery.MultiFile.min.js">GitHub</a> </p> <pre><code class="language-markup"><script src="//github.com/fyneworks/multifile/blob/master/jquery.MultiFile.min.js" type="text/javascript" language="javascript"></script></code></pre> </div> <div class="container clear section" id="Support"> <h2>Support</h2> <div class="row"> <div class="col-md-12"> <p> We very much encourage and would love you all to report issues, contribue and discuss this project on <a target="_blank" href="https://github.com/fyneworks/multifile">GitHub</a>. </p> <p> There's also a <a href="README.md">README.md</a> for quick reference, if you're that way inclined. </p> <p> This project started a a very long time ago... and it's been dormant since 2009! Support has been shockingly bad, we admit, but we would like to engage more actively with our users and the jQuery community from now on. So as of April 2014, we've left <a href="https://code.google.com/p/jquery-fyneworks/" target="_blank">Google Code</a> behind and will be starting a fresh project on <a target="_blank" href="https://github.com/fyneworks/multifile">GitHub</a>. Our other projects (<a href="http://www.fyneworks.com/jquery/star-rating">Star Rating</a> & <a href="http://www.fyneworks.com/jquery/CKEditor">CKEditor</a> will follow shortly). </p> </div> </div> </div> <div class="container clear section" id="Credit"> <h2>Credit where it's due!</h2> <div class="row"> <div class="col-md-12"> <ul> <li>Fyneworks.com <a href="http://www.fyneworks.com/">professional web design</a> and <a href="http://www.fyneworks.com/">google SEO experts</a> </li> <li>Dean Edwards - Author of <a href="http://dean.edwards.name/packer/">JS Packer</a> used to compress the plugin</li> <li>Adrian Wróbel - Fixed a nasty bug so the script could work perfectly in Opera</li> <li>Jonas Wagner - Modified plugin so newly created elements are an exact copy of the original element (ie.: persists attributes)</li> <li>Mike Alsup - Author of several <a href="http://www.malsup.com/jquery/">jQuery Plugins</a>... <ul> <li>Suggested solution to element naming convention / server-side handling</li> <li><a href="http://www.malsup.com/jquery/form/">Form plugin</a> - Used to submit forms via ajax</li> <li><a href="http://www.malsup.com/jquery/blockUI/">blockUI plugin</a> - Used to show pretty error messages</li> </ul> </li> <li>Julien Phalip - Identified conflict with variable name 'class' in several methods</li> </ul> </div> </div> </div> <div class="container clear section" id="License"> <h2>License Info</h2> <div class="row"> <div class="col-md-12"> <div class="license-info"> <table cellspacing="5" width="100%"> <tr> <td valign="middle"> <strong>Multiple File Selection Plugin</strong> by <a href="http://www.fyneworks.com/">Fyneworks.com</a> is licensed, <a target="_blank" href="http://jquery.org/license">as jQuery is</a>, under the <a target="_blank" href="http://en.wikipedia.org/wiki/MIT_License">MIT License</a>. </td> <td width="100"> OSI Certified<br /><a target="_blank" href="https://opensource.org/"><img alt="Open Source™" src="btn-oss.png" style="border:0;" /></a><br />Software </td> </tr> <tr> <td colspan="2"> <pre class="copyright">Copyright © 2008, 2014 <a href="http://www.fyneworks.com/">http://www.fyneworks.com/</a> Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.</pre> </td> </tr> </table> </div> </div> </div> </div> </div> </div>  <script> $('input[type=file]').each(function () { var e = $(this).attr('name','multifile-test[]'); e.wrap('<form class="test-form" action="test/test.php" method="post" enctype="multipart/form-data" target="upload-frame"></form>'); e.before( $('<button type="submit"/>') .text('Upload') .on('click',function () { var u = $('#upload-dialog'); var m = e.data('MultiFile'); if(!m) return; var f = m.files; if(!f) return; console.log('would upload ' + f.length +' file(s) in a '+ f.size_label +'kb payload', f); console.log(m); console.log('>>>>>'); u.show().dialog({ title: 'Upload Inspector', width: 'auto', height: 'auto', closeOnEscape: true, modal: true }); }) ); }); </script> <div id="upload-dialog" style="display:none;"> <div class="ui-widget"> <div class="ui-state-highlight ui-corner-all" style="padding: 0 .7em;"> <p> <span class="ui-icon ui-icon-info" style="float: left; margin-right: .3em;"></span> These files <strong>would</strong> have been uploaded. <strong>No files have been uploaded</strong> </p> </div> </div> <iframe id="upload-frame" name="upload-frame" src="about:blank" style="border:#ccc solid 1px; height:300px; width:560px;"></iframe> <div class="ui-widget"> <div class="ui-state-error ui-corner-all" style="padding: 0 .7em;"> <p> <span class="ui-icon ui-icon-alert" style="float: left; margin-right: .3em;"></span> Always perform server-side validation before uploading user files </p> </div> </div> </div>  <script src='ext/jquery.form.js' type="text/javascript" language="javascript"></script> <script src='ext/jquery.MetaData.js' type="text/javascript" language="javascript"></script> <script src='jquery.MultiFile.js' type="text/javascript" language="javascript"></script> <script> (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) })(window,document,'script','//www.google-analytics.com/analytics.js','ga'); ga('create', 'UA-1942730-1', 'fyneworks.com'); ga('send', 'pageview'); </script> </div><footer id="footer"><p>© Fyneworks</p></footer><script type="text/javascript">var _gaq = _gaq || []; _gaq.push(['_setAccount', 'UA-1942730-1']); _gaq.push(['_setDomainName', 'fyneworks.com']); _gaq.push(['_trackPageview']); (function() { var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); })();</script></body></html>