参考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用于在客户端实现文件选择、预览、进度显示等交互效果，以及通过Ajax发送文件到服务器，实现无刷新的用户体验。 1. **权限认证**：在上传文件前，通常需要验证用户是否有权执行此操作。这可以...
5. **服务器端接口**：虽然jQuery-File-Upload主要负责前端部分，但实现文件上传还需要与服务器端进行交互。服务器端需要提供接收文件的接口，并处理文件存储、验证等操作。该插件支持多种服务器端框架，如PHP、Node...
在“jquery多文件上传”这个主题中，我们将深入探讨如何使用jQuery实现多文件上传功能，这是一种常见的需求，特别是在需要用户提交多个文件的Web应用中。 一、jQuery与多文件上传基础 jQuery本身并不直接支持多...
本实例将详细讲解如何利用jQuery实现多文件上传，并结合PHP和Java后端处理上传的数据。 首先，jQuery是一个轻量级的JavaScript库，它简化了HTML文档遍历、事件处理、动画以及Ajax交互。在多文件上传中，jQuery可以...
在使用jQuery实现多文件上传功能时，通常会借助第三方插件来简化开发流程。本案例中，主要涉及的插件是`jquery.MultiFile.js`，它扩展了jQuery的功能，允许用户选择并上传多个文件。此外，还需要一些Java相关的库，...
"jquery-大文件上传插件，支持分片上传，断点续传"就是这样一个解决方案，它针对大文件上传进行了优化，确保了高效且用户友好的体验。 这个插件的核心特性包括： 1. **分片上传**：由于大文件一次性上传可能会导致...
本文将深入探讨如何使用jQuery实现多文件上传功能，并在此过程中获取每个文件的大小和格式信息。 首先，要实现多文件上传，我们需要一个HTML表单，通常包含一个`<input>`元素，其`type`属性设置为`file`，并且`...
通过以上步骤，你就成功地在ASP.NET（C#）项目中实现了使用jQuery Multiple File Upload Plugin的多文件上传功能。在实际应用中，你可能需要根据具体需求增加错误处理、文件类型验证等功能，以确保应用的安全性和...
本文将深入探讨如何使用jQuery实现多文件上传功能，并结合Java后端进行处理。多文件上传是一个常见的需求，特别是在Web应用程序中，允许用户一次性上传多个文件可以极大地提高用户体验。 首先，我们需要在前端使用...
"jquery实现多附件上传"这个主题涉及到的是利用jQuery来创建一个功能，允许用户在网页上选择并上传多个文件。这在现代网页应用中是非常常见的需求，比如论坛、社交媒体或者在线协作平台。 在jQuery中实现多附件上传...
现在，我们来详细探讨如何利用这些技术实现文件上传功能。 首先，我们需要创建一个HTML表单，用户可以通过这个表单选择文件进行上传。表单通常包含一个`<input>`元素，其`type`属性设置为`file`，以便用户能够选择...
这里我们使用的是Uploadify，它是一个基于JQuery的文件上传插件，支持批量上传和进度条显示，非常适用于创建用户友好的多文件上传界面。在"UploadifyDemo修改版"这个压缩包中，应该包含了Uploadify的示例代码和必要...
在这个“一个jquery的多文件上传示例”中，我们将探讨如何利用jQuery结合ASP.NET技术实现多文件上传的功能。这个示例提供了一个完整的解决方案，包括前端交互和后端处理。 首先，jQueryUploadify是jQuery的一个插件...
在本文中，我们将深入探讨jQuery实现的多文件上传功能，这是一种常见的前端技术，用于在Web应用中处理用户选择的多个文件。jQuery是一个流行的JavaScript库，它简化了DOM操作、事件处理以及Ajax交互，使得开发人员...
在本文中，我们将深入探讨如何使用Java和jQuery实现多文件上传功能，以及如何添加拖拽上传和进度条显示。这个话题对于任何需要处理用户上传大量数据的Web应用程序来说至关重要。 首先，`jQuery-File-Upload-9.10.1....
**jQuery Bootstrap多文件上传js**是一种利用jQuery库和Bootstrap框架实现的高级文件上传组件，它提供了丰富的功能和优雅的用户界面。这个组件旨在为用户提供一个简单而强大的方式来处理文件上传，包括选择多个文件...
`jQuery Large File Upload` 提供了一种解决方案，它允许用户通过jQuery库实现高效且用户友好的大文件上传功能。这个项目尤其适用于那些希望在PHP环境中集成文件上传功能的开发者，比如用于下载、文章、CMS（内容...
2. **jQuery插件**：例如`jQuery.form.js`或`jQuery.fileupload.js`，它们提供了方便的API来处理多文件上传。这些插件可以监听文件选择事件，创建FormData对象，将文件数据附加到对象中，并通过Ajax发送到服务器。 ...
Uploadify是Jquery的一个插件，专门用于实现文件上传功能，支持单文件和多文件上传，并且提供了丰富的自定义选项。在Asp.Net中使用Uploadify，首先需要在HTML页面中引入Jquery和Uploadify的JS及CSS文件，然后配置...