参考http://www.fyneworks.com/jquery/multiple-file-upload/#tab-Examples
经过整理如下:
<!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.46 (2009-05-12)</title>
<!--// documentation resources //-->
<script src="lib/jquery.js" type="text/javascript"></script>
<script src="lib/jquery.MultiFile.js" type="text/javascript" language="javascript"></script>
</head>
<body>
<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="/@/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="/@/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" οnclick="$(this).parent().prev().click()">$file</em>',
remove: '<img src="/@/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" οnclick="$(this).parent().prev().click()">$file</em>',
remove: '<img src="/@/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/>
</body>
</html>
相关资源：敏捷开发V1.0.pptx
