参考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" onclick="$(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" onclick="$(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>
分享到：
[u][/u]
相关推荐
/权限认证 /上传文件过滤 /显示文件过滤 /修改目录 /修改文件名 /删除目录
利用jQuery Multiple File Upload Plugin插件，实现的多文件上传，
ajax+jquery+ashx实现上传文件 简单易用，直接调用
JQuery实现多文件同时上传。超实用。。
jquery实现表单文件上传，并获取回调信息,下载之后只需要配置js路径就可实现上传
Jquery Large File Upload 用jquery实现大文件上传 可以很轻易的整合到下载，文章，cms，blog系统中
jquery 实现多文件上传， 同时支持进度条显示，解决大文件上传的方式
一个以实现无刷新jquery插件实现文件上传
ajax+jquery实现文件上传（详细注释）
主要介绍了php jquery 多文件上传简单实例，有需要的朋友可以参考一下
jquery实现ajax上传文件asp.net版
PHP实例开发源码—用Jquery实现大文件上传 Jquery Large File Upload.zip PHP实例开发源码—用Jquery实现大文件上传 Jquery Large File Upload.zip PHP实例开发源码—用Jquery实现大文件上传 Jquery Large File ...
Asp.Net 用Jquery的jdownloadt和Uploadify方法实现多个文件上传及下载
jQuery 实现文件上传
在Web API中使用jQuery AJAX实现文件上传的例子
jquery实现的ajax文件上传功能 $.ajaxFileUpload ( { url:'doajaxfileupload.php', secureuri:false, fileElementId:'fileToUpload', dataType: 'json', success: function (data, ...
jquery文件上传插件（多文件选择、带进度条 ,图片预览）
ajax+Jquery实现文件图片上传的Demo
jquery的大文件上传。动态显示进度 解决方案 vs2008 ,包含了高山来客的组件。
[上传下载]Jquery Large File Upload (Jquery实现大文件上传)_jqupload.zip