index.html
来自「jquery的多附件上传插件」· HTML 代码 · 共 983 行 · 第 1/3 页
HTML
983 行
<!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.44 (2009-04-08)</title>
<!--// documentation resources //-->
<script src="jquery.js" type="text/javascript"></script>
<script src="documentation.js" type="text/javascript"></script>
<link href="documentation.css" type="text/css" rel="stylesheet"/>
<!--// code-highlighting //-->
<script type="text/javaScript" src="/jquery/project/chili/jquery.chili-2.0.js"></script>
<script type="text/javaScript" src="/jquery/project/chili-toolbar/jquery.chili-toolbar.pack.js"></script>
<script type="text/javascript">try{ChiliBook.recipeFolder="/jquery/project/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>
<a name="top"></a>
<div id="wrap">
<div id="roof">
<a href="http://www.fyneworks.com/jquery/"><strong>jQuery Plugins</strong></a>:
<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/FCKEditor/">FCKEditor</a>,
<a href="http://www.fyneworks.com/jquery/Codepress/">Codepress</a>,
<strong>NEW:</strong> <a href="http://www.fyneworks.com/jquery/xml-to-json/">XML to JSON</a>
<span style="position:absolute; right:0;">
<script type="text/javascript">digg_title='jQuery Multiple File Upload Plugin';</script>
<script type="text/javascript">digg_url='http://www.fyneworks.com/jquery/multiple-file-upload/';</script>
<script type="text/javascript">digg_bgcolor='#e7e7e7';digg_skin='compact';digg_window='new';</script>
<script src="http://digg.com/tools/diggthis.js" type="text/javascript"></script>
</span>
</div>
<div id="head">
<table width="100%" cellspacing="5">
<tr>
<td valign="middle">
<h1>jQuery Multiple File Upload Plugin</h1>
<span style="cursor:help; background:#C00; padding:2px; color:#FFF;" title="Current Version">
v<strong>1.44</strong>
</span>
</td>
<td valign="middle" width="450" align="right">
<div id="search">
<form action="http://www.google.com/cse" id="cse-search-box" target="_blank">
<label for="q">Find another jQuery plugin:</label>
<input type="hidden" name="cx" value="partner-pub-9465008056978568:j3ebzr-v1o0" />
<input type="hidden" name="ie" value="ISO-8859-1" />
<input type="text" name="q" id="q" size="20" />
<input type="submit" name="sa" value="Search" />
</form>
<script type="text/javascript" src="http://www.google.com/coop/cse/brand?form=cse-search-box&lang=en"></script>
</div>
<form action="https://www.paypal.com/cgi-bin/webscr" method="post">
<input type="hidden" name="cmd" value="_s-xclick">
<input type="image" src="https://www.paypal.com/en_GB/i/btn/btn_donate_SM.gif" border="0" name="submit" alt="Donate!" style="padding:0;margin:0;">
<img alt="" border="0" src="https://www.paypal.com/en_GB/i/scr/pixel.gif" width="1" height="1">
<input type="hidden" name="encrypted" value="-----BEGIN PKCS7-----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-----END PKCS7-----
">
</form>
</td>
</tr>
</table>
</div>
<div id="body">
<div 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";
google_ad_width = 160;
google_ad_height = 600;
google_ad_format = "160x600_as";
google_ad_type = "text_image";
//2007-07-12: Fyneworks, jQuery, Banner
google_ad_channel = "0644126694+6785406728+8192505316";
//-->
</script>
<script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"></script>
</div>
<div id="documentation" 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>
</ul><!--// tabs //-->
<!--//
####################################
#
# * START CONTENT *
#
####################################
//-->
<div id="tab-Overview">
<h2>What is this?</h2>
<p>
The <strong>Multiple File Upload Plugin</strong> (<em>jQuery.MultiFile</em>)
is a non-obstrusive plugin for the jQuery Javascript library
that helps users easily select multiple files for upload quickly and easily
whilst also providing some basic validation functionality to help developers
idenfity simple errors, without having to submit the form (ie.: upload files).
</p>
<h2>How do I use it?</h2>
<p>
Just add the <code><strong>multi</strong></code> class to your file input element.
</p>
<table cellspacing="5" width="100%">
<tr>
<td valign="top">
<pre class="code"><code class="html"><input type="file" class="multi"/></code></pre>
</td>
<td valign="top" width="10">»</td>
<td valign="top" width="300">
<input type="file" class="multi"/>
</td>
</tr>
</table>
<p>
Use the <code><strong>maxlength</strong></code> property if you want to limit the number of files selected
</p>
<table cellspacing="5" width="100%">
<tr>
<td valign="top">
<pre class="code"><code class="html"><input type="file" class="multi" maxlength="2"/></code></pre>
</td>
<td valign="top" width="10">»</td>
<td valign="top" width="300">
<input type="file" class="multi" maxlength="2"/>
</td>
</tr>
</table>
<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 "|").
</p>
<table cellspacing="5" width="100%">
<tr>
<td valign="top">
<pre class="code"><code class="html"><input type="file" class="multi" accept="gif|jpg"/></code></pre>
</td>
<td valign="top" width="10">»</td>
<td valign="top" width="300">
<input type="file" class="multi" accept="gif|jpg"/>
</td>
</tr>
</table>
<p style="font-weight:bold; color:red;">
PS.: Server-side validation is always required.
</p>
</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>
⌨️ 快捷键说明
复制代码Ctrl + C
搜索代码Ctrl + F
全屏模式F11
增大字号Ctrl + =
减小字号Ctrl + -
显示快捷键?