|
Server : Apache System : Linux srv.rainic.com 4.18.0-553.47.1.el8_10.x86_64 #1 SMP Wed Apr 2 05:45:37 EDT 2025 x86_64 User : rainic ( 1014) PHP Version : 7.4.33 Disable Function : exec,passthru,shell_exec,system Directory : /home/akaindir/www/crm/libraries/jquery/multiplefileupload/ |
Upload File : |
<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd'>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>jQuery Multiple File Upload Plugin v1.48 (2012-02-08)</title>
<!--// documentation resources //-->
<script src='jquery.js' type="text/javascript"></script>
<script src='documentation/documentation.js' type="text/javascript"></script>
<link href='documentation/documentation.css' type="text/css" rel="stylesheet"/>
<!--// code-highlighting //-->
<script type="text/javaScript" src="documentation/chili/jquery.chili-2.0.js"></script>
<!--//documentation/chili-toolbar/jquery.chili-toolbar.pack.js//-->
<script type="text/javascript">try{ChiliBook.recipeFolder="documentation/chili/"}catch(e){}</script>
<!--// plugin-specific resources //-->
<script src='jquery.form.js' type="text/javascript" language="javascript"></script>
<script src='jquery.MetaData.js' type="text/javascript" language="javascript"></script>
<script src='jquery.MultiFile.js' type="text/javascript" language="javascript"></script>
<script src='jquery.blockUI.js' type="text/javascript" language="javascript"></script>
</head>
<body>
<div class="Clear" id="wrap">
<div class="Clear" id="head">
<table width="100%" cellspacing="10">
<tr>
<td valign="middle" width="120">
<a href="/jquery/"><img src="documentation/fyneworks.png" width="101" height="24" alt="Fyneworks" /></a>
</td>
<td valign="middle" width="10"> </td>
<td valign="middle">
<h1 style="float:left;">jQuery Multiple File Upload Plugin</h1>
v<strong style="color:#000;">1.48 (2012-02-08)</strong>
</td>
<td valign="middle" width="90" align="right">
<strong style="color:#900;">Buy us a pint</strong>:
</td>
<td valign="middle" width="120" align="right">
<img src="documentation/beer.png" width="24" height="32" alt="Beer" style="float:left" />
<form action="https://www.paypal.com/cgi-bin/webscr" method="post" style="float:left">
<input type="hidden" name="cmd" value="_s-xclick">
<input type="hidden" name="hosted_button_id" value="6856904">
<input type="image" src="documentation/paypal.png" width="81" height="32" border="0" name="submit" alt="Donate">
<img alt="" border="0" src="https://www.paypal.com/en_GB/i/scr/pixel.gif" width="1" height="1">
</form>
</td>
<td valign="middle" width="90" align="right">
<strong style="color:#090;">Stay tuned</strong>:
</td>
<td valign="middle" width="98" align="right">
<a href="http://plus.google.com/106186719756358832500" target="_blank"><img src="documentation/gplus.png" width="32" height="32" alt="+1"
/></a><a href="http://www.facebook.com/fyneworks" target="_blank"><img src="documentation/facebook.png" width="32" height="32" alt="Like"
/></a><a href="http://www.twitter.com/fyneworks" target="_blank"><img src="documentation/twitter.png" width="32" height="32" alt="Follow" /></a>
</td>
<td valign="middle" width="5"> </td>
</tr>
</table>
</div>
<div class="Clear" id="body">
<div class="Clear" id="ad">
<!--//
<div id='vu_ytplayer_vjVQa1PpcFNzWL_xJNUOpZhjtZP7PE8aGHuLQqHHrFI='><a href='http://www.youtube.com/browse'>Watch the latest videos on YouTube.com</a></div>
<script type='text/javascript' src='http://www.youtube.com/watch_custom_player?id=vjVQa1PpcFNzWL_xJNUOpZhjtZP7PE8aGHuLQqHHrFI='></script>
//-->
<script type="text/javascript"><!--
google_ad_client = "pub-9465008056978568";
/* 120x600, created 25/11/09 */
google_ad_slot = "4176621808";
google_ad_width = 120;
google_ad_height = 600;
//--></script>
<script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"></script>
</div>
<div class="Clear" id="documentation">
<div class="tabs">
<ul class="Clear">
<li><a href="#tab-Overview" id="btn-Overview">Overview</a></li>
<li><a href="#tab-Examples" id="btn-Examples">Examples</a></li>
<li><a href="#tab-MultiLingual" id="btn-MultiLingual">Locale</a></li>
<li><a href="#tab-Uploading" id="btn-Uploading">Uploading</a></li>
<li><a href="#tab-Download" id="btn-Download">Download</a></li>
<li><a href="#tab-Support" id="btn-Support">Support</a></li>
<li><a href="#tab-License" id="btn-License">License</a></li>
<li><a href="#tab-More" id="btn-More">More</a></li>
</ul><!--// tabs //-->
<!--//
####################################
#
# * START CONTENT *
#
####################################
//-->
<div id="tab-Overview">
<h2>What <span style="color:green;">this is</span></h2>
<p>
This <strong>jQuery Multiple File Upload Plugin</strong> (<code>$.MultiFile</code>)
is a non-obstrusive plugin for <a href="http://www.jquery.com/">jQuery</a>
that helps users easily select multiple files for upload quickly and easily
on your <a href="http://www.webhostingsearch.com/">hosting server</a>
whilst also providing some basic validation functionality to help developers
idenfity simple errors, without having to submit the form (ie.: upload files).
</p>
<h2>What <span style="color:red;">this isn't</span></h2>
<p>
This plugin will not create a dialog that allows the user to select multiple files at once.
That simply cannot be done via javascript. If that's what you need, you should consider using
<a href="http://www.w3schools.com/html5/att_input_multiple.asp">HTML5's <code>multiple="multiple"</code> attribute</a>
or one of the many other
<a href="https://www.google.co.uk/search?q=flash+upload">flash based file upload solutions</a>
(eg.: <a href="http://swfupload.org">SWFupload</a>, <a href="http://www.uploadify.com/">uploadify</a> and others)
</p>
<h2>How it works</h2>
<p>
The plugin creates a new file input element every time the user select a file,
which allows the user to select a file, then another, then another, then another and so on...
selecting as many files is required, <strong>one at a time</strong>.
</p>
<h2>How do I use it?</h2>
<table cellspacing="0" width="100%">
<tr>
<td valign="top" width="30%">
<p>
Just add the <code><strong>multi</strong></code> class to your file input element.
</p>
<pre class="code"><code class="html"><input type="file" class="multi"/></code></pre>
<br/><br/>
<input type="file" class="multi"/>
</td>
<td valign="top" width="20"> </td>
<td valign="top" width="30%">
<p>
Use the <code><strong>maxlength</strong></code> property if you want to limit the number of files selected.
(<span style="font-weight:bold; color:red;">server-side validation is always required</span>)
</p>
<pre class="code"><code class="html"><input type="file" class="multi" maxlength="2"/></code></pre>
<br/><br/>
<input type="file" class="multi" maxlength="2"/>
</td>
<td valign="top" width="20"> </td>
<td valign="top" width="30%">
<p>
Use the <code><strong>accept</strong></code> property if you only want files of a certain extension to be selected
Separate valid extensions with a "|", like this: "jpg|gif|png".
(<span style="font-weight:bold; color:red;">server-side validation is always required</span>)
</p>
<pre class="code"><code class="html"><input type="file" class="multi" accept="gif|jpg"/></code></pre>
<br/><br/>
<input type="file" class="multi" accept="gif|jpg"/>
</td>
</tr>
</table>
</div><!--// tab-Overview //-->
<div id="tab-Examples">
<h2>Using HTML</h2>
<table summary="MultiFile Upload Demos" width="100%" cellspacing="10">
<tr>
<td valign="top" width="33%">
<fieldset style="border:0">
<legend><strong>Example 1</strong></legend>
<code class="">
class="multi" maxlength="2"
</code>
<div class="P5 B">
Limit: 2 files.
<br/>
Allowed extensions: any.
</div>
<form action="" class="P10">
<input type="file" class="multi" maxlength="2"/>
</form>
</fieldset>
</td>
<td valign="top" width="33%">
<fieldset style="border:0">
<legend><strong>Example 2</strong></legend>
<code class="">
class="multi" accept="gif|jpg"
</code>
<div class="P5 B">
Limit: no limit.
<br/>
Allowed extensions: gif and jpg.
</div>
<form action="" class="P10">
<input type="file" class="multi" accept="gif|jpg"/>
</form>
</fieldset>
</td>
<td valign="top" width="33%">
<fieldset style="border:0">
<legend><strong>Example 3</strong></legend>
<code class="">
class="multi" accept="gif|jpg" maxlength="3"
</code>
<div class="P5 B">
Limit: 3 files
<br/>
Allowed extensions: gif, jpg.
</div>
<form action="" class="P10">
<input type="file" class="multi" accept="gif|jpg" maxlength="3"/>
</form>
<div class="P5 Warning Bold">
Note that server-side validation is always required
</div>
</fieldset>
</td>
</tr>
</table>
<hr/>
<h2>Using class property</h2>
<table summary="MultiFile Upload Demos" width="100%" cellspacing="10">
<tr>
<td valign="top" width="33%">
<fieldset style="border:0">
<legend><strong>Example 4</strong></legend>
<code class="">
class="multi max-2"
</code>
<div class="P5 B">
Limit: 2 files.
<br/>
Allowed extensions: any.
</div>
<form action="" class="P10">
<input type="file" class="multi max-2"/>
</form>
</fieldset>
</td>
<td valign="top" width="33%">
<fieldset style="border:0">
<legend><strong>Example 5</strong></legend>
<code class="">
class="multi accept-gif|jpg"
</code>
<div class="P5 B">
Limit: no limit.
<br/>
Allowed extensions: gif, jpg.
</div>
<form action="" class="P10">
<input type="file" class="multi accept-gif|jpg"/>
</form>
</fieldset>
</td>
<td valign="top" width="33%">
<fieldset style="border:0">
<legend><strong>Example 6</strong></legend>
<code class="">
class="multi max-3 accept-gif|jpg"
</code>
<div class="P5 B">
Limit: 3 files
<br/>
Allowed extensions: gif, jpg.
</div>
<form action="" class="P10">
<input type="file" class="multi max-3 accept-gif|jpg"/>
</form>
<div class="P5 Warning Bold">
Note that server-side validation is always required
</div>
</fieldset>
</td>
</tr>
</table>
<hr/>
<h2>Moving the file list</h2>
<table summary="MultiFile Upload Demos" width="100%" cellspacing="10">
<tr>
<td valign="top" width="50%">
<fieldset style="border:0">
<legend><strong>Example 7</strong></legend>
<p>This example populates the file list in a custom element</p>
<pre class="code"><code class="js">$(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>
</td>
<td valign="top" width="50%">
<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>
</td>
</tr>
</table>
<hr/>
<h2>Customising the file list</h2>
<table summary="MultiFile Upload Demos" width="100%" cellspacing="10">
<tr>
<td valign="top" width="50%">
<fieldset style="border:0">
<legend><strong>Example 8 A</strong></legend>
<p>Use a custom 'remove' image in the file list</p>
<pre class="code"><code class="js">$(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>
</td>
<td valign="top" width="50%">
<form action="" class="P10">
<input type="file" id="T8A"/>
</form>
</td>
</tr>
</table>
<table summary="MultiFile Upload Demos" width="100%" cellspacing="10">
<tr>
<td valign="top" width="50%">
<fieldset style="border:0">
<legend><strong>Example 8 B</strong></legend>
<p>Customising all list content</p>
<pre class="code"><code class="js">$(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>
</td>
<td valign="top" width="50%">
<form action="" class="P10">
<input type="file" id="T8B"/>
</form>
</td>
</tr>
</table>
<hr/>
<h2>Using events</h2>
<table summary="MultiFile Upload Demos" width="100%" cellspacing="10">
<tr>
<td valign="top" width="50%">
<fieldset style="border:0">
<legend><strong>Example 9</strong></legend>
<p>
The events available are:<br/>
onFileAppend, afterFileAppend,
onFileSelect, afterFileSelect,
onFileRemove, afterFileRemove
</p>
<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>
<pre class="code"><code class="js">$(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>')
}
});
});</code></pre>
<script type="text/javascript" language="javascript">
$(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>')
}
});
});
</script>
</fieldset>
</td>
<td valign="top" width="50%">
<form action="" class="P10">
<input type="file" id="T9"/>
</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>
</td>
</tr>
</table>
<hr/>
<h2>Advanced Usage</h2>
<h3>Using your own selectors</h3>
<pre class="code"><code class="js">$(function(){ // wait for document to load
$('#MyFileUpload').MultiFile();
});</code></pre>
<h3>Setting limit via script</h3>
<pre class="code"><code class="js">$(function(){ // wait for document to load
$('#MyFileUpload').MultiFile(5 /*limit will be set to 5*/);
});</code></pre>
<h3>Advanced configuration</h3>
<pre class="code"><code class="js">$(function(){ // wait for document to load
$('#MyCoolFileUpload').MultiFile({
max: 5,
accept: 'gif|jpg|png|bmp|swf'
});
});</code></pre>
<h3>Customising visible strings for multi-lingual support</h3>
<pre class="code"><code class="js">$(function(){ // wait for document to load
$('#PortugueseFileUpload').MultiFile({
STRING: {
remove:'Remover',
selected:'Selecionado: $file',
denied:'Invalido arquivo de tipo $ext!'
}
});
});</code></pre>
</div><!--// tab-Examples //-->
<div id="tab-MultiLingual">
<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" 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 (require MetaData plugin)</h3>
<pre class="code"><code class="html"><input type="file" class="<span style="color:#900">multi</span>
<span style="color:#900">{accept:'gif|jpg', max:3, STRING:{
remove:'Remover',
selected:'Selecionado: $file',
denied:'Invalido arquivo de tipo $ext!',
duplicate:'Arquivo ja selecionado:\n$file!'
}}</span>" /></code></pre>
<h3>Method 2: Programatically by ID (ONE element only, does not require MetaData plugin)</h3>
<pre class="code"><code class="html"><input type="file" id="<span style="color:#900">PortugueseFileUpload</span>" /></code></pre>
<pre class="code"><code class="js">$(function(){
$('<span style="color:#900">#PortugueseFileUpload</span>').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> elements, 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 class="code"><code class="html"><input type="file" class="<span style="color:#900">multi-pt</span>" />
<input type="file" class="<span style="color:#900">multi-pt</span>" />
<input type="file" class="<span style="color:#900">multi-pt</span>" /></code></pre>
<pre class="code"><code class="js">$(function(){
$('<span style="color:#900">.multi-pt</span>').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><!--// tab-MultiLingual //-->
<div id="tab-Uploading">
<h2>Can this plugin upload files?</h2>
<p class="Big Warning">No, this jQuery plugin does not upload files</p>
<p>
Javascript is a client side language and cannot upload files -
this plugin will only go as far as helping the user select the files
to upload and assisting in the validation process by warning the user of common
mistakes before server-side validation takes place.
When the form is submitted, <strong>it's up to you</strong> to have
a server-side script that will actually upload the files.
</p>
<p>
<span style="color:#FF0000">Please do not email me asking how to do this!!!</span>
There is plenty of information out there and you can easily
<a target="_blank" href="http://www.google.co.uk/search?hl=en&rls=GGGL%2CGGGL%3A2006-14%2CGGGL%3Aen&q=how+to+upload+files+in+php&btnG=Search&meta=">find it on Google</a>.
But because I'm such a nice guy, I've put a quick list of the best links here:
</p>
<h3>ASP users</h3>
<p>
<a target="_blank" href="http://www.freeaspupload.net/">FreeASPUpload</a> - Free, easy to use and no component required. This is my favourite.
<br/>
<a href="http://www.asp101.com/articles/jacob/scriptupload.asp">Pure ASP File Upload</a> by Jacob Gilley
<br/>
<a href="http://www.freevbcode.com/ShowCode.asp?ID=4596">File Upload via ASP (Pure ASP Solution, no .DLL)</a>
</p>
<h3>PHP users</h3>
<p>
See <strong>File Upload Tutorials</strong> from
<a target="_blank" href="http://www.w3schools.com/php/php_file_upload.asp">W3CSchools</a>,
<a target="_blank" href="http://php.about.com/od/advancedphp/ss/php_file_upload.htm">About.com</a>,
<a target="_blank" href="http://www.tizag.com/phpT/fileupload.php">Tizag</a>
</p>
<p>
<u class="Warning">NOTICE TO PHP USERS</u>:
The plugin's default behaviour generates an array of elements (sharing the same name).
In order for this array to be properly identified and handled in PHP, you have to add "[]" to name of your element.<br/>
eg.:
<pre class="code"><code class="html"><input type="file" name="MyStuff[]"...</code></pre>
</p>
<br/><br/>
<h2>Having problems?</h2>
<p>
1. Make sure your form has <strong>method=POST</strong> and <strong>enctype=multipart/form-data</strong>
</p>
<p>
2. Are you using valid (x)HTML? Invalid markup can stop the form from being submitted altogether
</p>
<p>
3. Are you using the correct element names as required/expected by your server-side script?
</p>
<p>
4. Have you tried uploading a single file without using the plugin? Makes sure this works before submitting a bug report
</p>
<br/><br/>
<h2>I promise I can upload my own files. What do I need to know?</h2>
<p>
You should know that the plugin works by hiding elements with a selected file
and creating new empty elements. This means when submitting the form, there
will always be an empty item at the end of the list of files.
Actually, that would have been a problem but this plugin takes care of disabling
all dummy empty file inputs for you before the form gets submitted -
be it via ajax or natively. So this is good to know, but it's not something
you need to worry about.
</p>
<p>
However, if you are submitting the form programmatically via javascript, you must call this <strong>before</strong> submitting the form....
<pre class="code"><code class="js">$.fn.MultiFile.disableEmpty(); // before submiting the form</code></pre>
</p>
<p>
And if you're doing things the ajax way, you should call this when you're done to re-enable the dummy element:
<pre class="code"><code class="js">$.fn.MultiFile.reEnableEmpty(); // after submiting the form</code></pre>
</p>
<br/><br/>
<h2>Ajax</h2>
<p>
You may use the jQuery <a href="http://www.malsup.com/jquery/form/">Form Plugin</a>
to submit the form via ajax.
</p>
<h3>How do I reset the control?</h3>
<p>
To reset the file selections, just make the following call:
<pre class="code"><code class="js">$('input:file').MultiFile('reset')</code></pre>
</p>
</div><!--// tab-Uploading //-->
<!-- ############################ //-->
<div id="tab-Download">
<h2>Download</h2>
<p>
This project (and all related files) can also be accessed via its
<a target="_blank" href="http://code.google.com/p/jquery-multifile-plugin/">Google Code Project Page</a>.
</p>
<table cellspacing="5">
<tr>
<td valign="top" align="right">Full Package:</td>
<td valign="top">
<big>
<img src="documentation/download.gif" style="margin:0 5px 5px 0; float:left;">
v<strong>1.48</strong>
<a href="http://jquery-multifile-plugin.googlecode.com/svn/trunk/multiple-file-upload.zip"><strong>multiple-file-upload.zip</strong></a>
</big>
</td>
</tr>
<tr>
<td valign="top" align="right"></td>
<td valign="top">
<div class="Clear" style="margin:0 0 10px 0;" onClick="$('a:eq(0)',this).click()">
<strong class="Yes" style="background:#090; color:#fff; padding:3px;">Stay up-to-date!</strong>
<span style="padding:3px;">
Major updates will be announced on
<a target="_blank" href="http://twitter.com/fyneworks" class="external">Twitter</a>:
<a target="_blank" href="http://twitter.com/fyneworks" class="external">@fyneworks</a>
</span>
</div>
</td>
</tr>
<tr>
<td valign="top" align="right">Core Files:</td>
<td valign="top">
These are the individual required files (<span class="Warning">already included in the zip package above</span>)
<ul>
<li><a href="http://jquery-multifile-plugin.googlecode.com/svn/trunk/jquery.MultiFile.js"><strong>jQuery.MultiFile.js</strong></a>
(packed version: <a href="http://jquery-multifile-plugin.googlecode.com/svn/trunk/jquery.MultiFile.pack.js">jQuery.MultiFile.pack.js</a>)</li>
</ul>
</td>
</tr>
<tr>
<td valign="top" align="right">jQuery:</td>
<td valign="top">
<a target="_blank" href="http://jquery.com/src/jquery-latest.js">jquery-latest.js</a> (<a target="_blank" href="http://www.jquery.com/">see jQuery.com</a>)
</td>
</tr>
</table>
<p>
Download <a href="http://www.activextest.com/">www.activextest.com</a> program for free and keep your computer protected for improved speed, performance and operation!
</p>
<h2>Related Downloads</h2>
<table cellspacing="5">
<tr>
<td valign="top" align="right">Related:</td>
<td valign="top">
<a target="_blank" href="http://plugins.jquery.com/project/metadata/">Metadata plugin</a> - Used to retrieve inline configuration from class variable
<br/>
<a target="_blank" href="http://www.malsup.com/jquery/blockUI/">blockUI plugin</a> - Used to show pretty error messages
<br/>
<a target="_blank" href="http://www.malsup.com/jquery/form/">Form plugin</a> - Used to submit forms via ajax
</td>
</tr>
</table>
<h2>Installation</h2>
<h3>Required Files</h3>
<pre class="code"><code class="html"><script src="jquery-latest.js" type="text/javascript" language="javascript"></script>
<script src="jquery.MultiFile.js" type="text/javascript" language="javascript"></script>
</code></pre>
<h3>Optional Files</h3>
<p>
<a target="_blank" href="http://plugins.jquery.com/project/metadata/"><u>Metadata Plugin</u></a>
<br/>
This great plugin can be used to configure the plugin via the class parameter.<br/>
<small>You can also <a href='jquery.MetaData.js'>download the version being used on this page</a></small>
</p>
<p>
<a target="_blank" href="http://www.malsup.com/jquery/block/"><u>BlockUI Plugin</u></a>
<br/>
Used to show 'pretty' error messages, instead of the browser's alert() function.<br/>
<small>You can also <a href='jquery.blockUI.js'>download the version being used on this page</a></small>
</p>
<p>
<a target="_blank" href="http://www.malsup.com/jquery/form/"><u>Form Plugin</u></a>
<br/>
Used to submit forms via Ajax.
</p>
<h2>SVN Repository</h2>
<p>
If you're a major geek or if you really really want to stay up-to-date with
with future updates of this plugin, go ahead and plug yourself to the
<a target="_blank" href="http://code.google.com/p/jquery-multifile-plugin/">SVN Repository</a>
on the official
<a target="_blank" href="http://code.google.com/p/jquery-multifile-plugin/">Google Code Project Page</a>.
</p>
<table cellspacing="5">
<tr>
<td valign="top" align="right">SVN Checkout:</td>
<td valign="top">
<img src="documentation/js.gif" style="margin:0 5px 5px 0; float:left;">
<a target="_blank" href="http://code.google.com/p/jquery-multifile-plugin/source/checkout"><strong>SVN Checkout Instructions</strong></a>
</td>
</tr>
<tr>
<td valign="top" align="right">Browse Online:</td>
<td valign="top">
<img src="documentation/folder.gif" style="margin:0 5px 5px 0; float:left;">
<a target="_blank" href="http://code.google.com/p/jquery-multifile-plugin/source/browse/"><strong>Browse Source</strong></a>
</td>
</tr>
</table>
<h2>Alternative Download - From this website</h2>
<p>
Just in case it's the end of the world and the Google Code site becomes unavailable,
the project files can also be downloaded from this site.
<br/>
However, please note that this site is updated periodically whereas the Google Code
project is kept up-to-date almost instantaneously. If you'd like the very latest
version of this plugin
<strong>you are advised to use the links above and download the files from Google Code</strong>
- this will ensure the files you download have the very latest features and bug fixes.
</p>
<table cellspacing="5">
<tr>
<td valign="top" align="right">Full Package:</td>
<td valign="top">
<img src="documentation/download.gif" style="margin:0 5px 5px 0; float:left;">
v<strong>1.48</strong>
<a href="./multiple-file-upload.zip"><strong>multiple-file-upload.zip</strong></a>
</td>
</tr>
<tr>
<td valign="top" align="right"></td>
<td valign="top">
<div class="Clear" style="margin:0 0 10px 0;" onClick="$('a:eq(0)',this).click()">
<strong class="Yes" style="background:#090; color:#fff; padding:3px;">Stay up-to-date!</strong>
<span style="padding:3px;">
Major updates will be announced on
<a target="_blank" href="http://twitter.com/fyneworks" class="external">Twitter</a>:
<a target="_blank" href="http://twitter.com/fyneworks" class="external">@fyneworks</a>
</span>
</div>
</td>
</tr>
<tr>
<td valign="top" align="right">Core Files:</td>
<td valign="top">
These are the individual required files (<span class="Warning">already included in the zip package above</span>)
<ul>
<li><a href='./jquery.MultiFile.js'><strong>jQuery.MultiFile.js</strong></a> (packed version: <a href="./jquery.MultiFile.pack.js">jQuery.MultiFile.pack.js</a>)</li>
</ul>
</td>
</tr>
<tr>
<td valign="top" align="right">jQuery:</td>
<td valign="top">
<a target="_blank" href="http://jquery.com/src/jquery-latest.js">jquery-latest.js</a> (<a target="_blank" href="http://www.jquery.com/">see jQuery.com</a>)
</td>
</tr>
</table>
</div><!--// tab-Download //-->
<div id="tab-Support">
<h2>Support</h2>
<p>
Quick Support Links: <a href="http://groups.google.com/group/jquery-en" class="B Yes">Help me!</a>
| <a target="_blank" href="http://code.google.com/p/jquery-multifile-plugin/issues/entry">Report a bug</a>
| <a target="_blank" href="http://code.google.com/p/jquery-multifile-plugin/issues/entry">Suggest new feature</a>
<!--//
OLD: Forget Trac - Let's use Google Code!
| <a target="_blank" href="http://plugins.jquery.com/node/add/project_issue/MultiFile/bug">Report a bug</a>
| <a target="_blank" href="http://plugins.jquery.com/node/add/project_issue/MultiFile/feature">Suggest new feature</a>
//-->
</p>
<p>
Support for this plugin is available through the <a target="_blank" href="http://jquery.com/discuss/" class="external">jQuery Mailing List</a>.
This is a very active list to which many jQuery developers and users subscribe.
<br/>
Access to the jQuery Mailing List is also available through
<a target="_blank" href="http://www.nabble.com/JQuery-f15494.html" class="external">Nabble Forums</a>
and the
<a target="_blank" href="http://groups.google.com/group/jquery-en" class="external">jQuery Google Group</a>.
</p>
<p>
<strong class="Warning">WARNING:</strong>
Support will not be provided via the <a href="http://plugins.jquery.com/">jQuery Plugins</a>
website.
If you need help, please direct your questions to the
<a target="_blank" href="http://groups.google.com/group/jquery-en" class="external">jQuery Mailing List</a>
or
<a target="_blank" href="http://code.google.com/p/jquery-multifile-plugin/issues/entry">report an issue</a>
on the official
<a target="_blank" href="http://code.google.com/p/jquery-multifile-plugin/">Google Code Project Page</a>.
</p>
<h2>Official Links</h2>
<ul>
<li><a target="_blank" href="http://plugins.jquery.com/project/MultiFile/" class="external">jQuery Plugin Project Page</a></li>
<li><a target="_blank" href="http://code.google.com/p/jquery-multifile-plugin/">Google Code Project Page</a></li>
</ul>
<h2>Credit where it's due...</h2>
<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><!--// tab-Support //-->
<!--//
####################################
#
# * END CONTENT *
#
####################################
//-->
<div id="tab-License">
<h2>What's the catch?</h2>
<p>
<strong>There's no catch</strong>. Use it, abuse it - even take it
apart and modify it if you know what you're doing. You don't have to,
but if you're feeling generous you can link back to this website (instructions below).
</p>
<h2>Attribute this work</h2>
<div class="license-info">
<table cellspacing="5" width="100%">
<tr>
<td width="90" align="right">Attribution link:</td>
<td valign="top">© <a href="http://www.fyneworks.com/">Fyneworks.com</a></td>
</tr>
<tr>
<td width="90" align="right">HTML Code:</td>
<td valign="top">
<input type="text" onFocus="this.select();" onClick="this.select()" readonly="" style="width:100%;"
value="&copy; <a href="http://www.fyneworks.com/">Fyneworks.com</a>"
/>
</td>
</tr>
</table>
</div>
<h2>License Info</h2>
<div class="license-info">
<table cellspacing="5" width="100%">
<tr>
<td valign="middle">
<strong>Multiple File Upload Plugin</strong>
by <a href="http://www.fyneworks.com/">Fyneworks.com</a>
is licensed under the
<a target="_blank" href="http://en.wikipedia.org/wiki/MIT_License">MIT License</a> and the
<a target="_blank" href="http://creativecommons.org/licenses/GPL/2.0/">GPL License</a>.
</td>
<td width="100"><a target="_blank" href="http://creativecommons.org/licenses/GPL/2.0/"><img alt="Creative Commons License" style="border-width:0" src="http://creativecommons.org/images/public/somerights20.png"/></a></td>
</tr>
<tr>
<td colspan="2">
<pre class="copyright">Copyright © 2008 <a href="http://www.fyneworks.com/">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><!--// License Info //-->
</div><!--// tab-License //-->
<div id="tab-More">
<table width="100%" cellspacing="20">
<tr>
<td valign="top" width="50%">
<h2><a href="/jquery/multiple-file-upload/"><strong>Multiple File Upload Plugin</strong></a></h2>
<p>
<!--//<strong style="color:green;">UPDATED!</strong>//-->
Provides a non-obstrusive way of selecting multiple files for upload.
Supports <a href="http://bassistance.de/jquery-plugins/jquery-plugin-validation/">validation</a> and <a href="http://malsup.com/jquery/form/">form</a> plugins.
</p>
<h2><a href="/jquery/star-rating/"><strong>Star-Rating Plugin</strong></a></h2>
<p>
<!--//<strong style="color:green;">UPDATED!</strong>//-->
Creates a non-obstrusive star-rating control from any set of radio boxes.
Features include half/partial stars and an API for programmatic control.
Supports the <a href="http://bassistance.de/jquery-plugins/jquery-plugin-validation/">validation plugin</a>.
</p>
<h2><a href="/jquery/xml-to-json/"><strong>XML to JSON</strong></a></h2>
<p>
<!--//<strong style="color:green;">UPDATED!</strong>//-->
Convert XML to JSON and read data from XML files/RSS feeds with ease.
</p>
</td>
<td valign="top" width="50%">
<h2><a href="/jquery/CKEditor/"><strong>CKEditor Plugin</strong></a></h2>
<p>
jQuery plugin for non-obstrusive integration of textareas with <strong>CKEditor</strong>.
</p>
<h2><a href="/jquery/FCKEditor/"><strong>FCKEditor Plugin</strong></a></h2>
<p>
jQuery plugin for non-obstrusive integration of textareas with <strong>FCKEditor</strong>.
<br/>
<strong style="color:#f00;">OLD!</strong> It is recommended you upgrade to CKEditor (above).
</p>
<h2><a href="/jquery/Codepress/"><strong>Codepress Plugin</strong></a></h2>
<p>
jQuery plugin for non-obstrusive integration of textareas with <strong>Codepress</strong>.
</p>
</td>
</tr>
</table>
</div><!--// tab-More//-->
</div><!--// tabs //-->
</div>
</div>
<div id="push"></div>
</div>
<div id="foot">
<table width="100%" cellspacing="10">
<tr>
<td valign="middle" width="400" align="left">
<a href="http://www.fyneworks.com/jquery/multiple-file-upload/">Multiple File Upload</a>,
<a href="http://www.fyneworks.com/jquery/star-rating/">Star Rating</a>,
<a href="http://www.fyneworks.com/jquery/CKEditor/">CKEditor</a>
<a href="http://www.fyneworks.com/jquery/xml-to-json/">XML to JSON</a>
</td>
<td valign="top" align="center">
[<a href="#">back to top</a>]
</td>
<td valign="middle" width="400" align="right" colspan="2">
<span class='st_sharethis_hcount' displayText='ShareThis'></span>
<span class='st_twitter_hcount' displayText='Tweet'></span>
<span class='st_facebook_hcount' displayText='Facebook'></span>
<!--//<span class='st_stumbleupon_hcount' displayText='StumbleUpon'></span>//-->
<span class='st_plusone_hcount' displayText='Google +1'></span>
<!--//<span class='st_digg_hcount' displayText='Digg'></span>//-->
<!--//<span class='st_reddit_hcount' displayText='Reddit'></span>//-->
<script type="text/javascript">var switchTo5x=true;</script>
<script type="text/javascript" src="http://w.sharethis.com/button/buttons.js"></script>
<script type="text/javascript">stLight.options({publisher: "08df54c5-b85f-4b2d-aac7-16cb76975bb3"}); </script>
</td>
</tr>
<tr>
<td valign="top" width="400">
<strong>jQuery Plugins</strong>
by <a href="http://www.fyneworks.com/">Fyneworks.com</a>
<br/>
Licensed under the
<a target="_blank" href="http://en.wikipedia.org/wiki/MIT_License">MIT License</a> and the
<a target="_blank" href="http://creativecommons.org/licenses/GPL/2.0/">GPL License</a>.
</td>
<td valign="top" align="center">
</td>
<td valign="top" width="280" align="right">
<span style="color:#090;">
Tested with jQuery 1.7 on:<br/>IE6, IE7, IE8, FF, Chrome, Opera and Safari
</span>
</td>
<td valign="top" width="120" align="right">
<a target="_blank" href="http://jquery.com/"><img width="110" height="31" src="documentation/jq.png" alt="Powered by jQuery" style="vertical-align:middle;"/></a>
</td>
</tr>
</table>
</div>
<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>