jquery实现多文件上传

Blithe · 发表于 2013-2-7 20:18:31

参考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>

<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: '&lt;img src="/@/bin.gif" height="16" width="16" alt="x"/&gt;'
  }
});
});</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: '&lt;em title="Click to remove" &gt;$file&lt;/em&gt;',
remove: '&lt;img src="/@/bin.gif" height="16" width="16" alt="x"/&gt;'
  }
});
});</code></pre>
<script type="text/javascript" language="javascript">
$(function(){ // wait for document to load
$('#T8B').MultiFile({
  STRING: {
file: '<em title="Click to remove" >$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('&lt;li&gt;onFileRemove - '+value+'&lt;/li&gt;')
  },
  afterFileRemove: function(element, value, master_element){
$('#F9-Log').append('&lt;li&gt;afterFileRemove - '+value+'&lt;/li&gt;')
  },
  onFileAppend: function(element, value, master_element){
$('#F9-Log').append('&lt;li&gt;onFileAppend - '+value+'&lt;/li&gt;')
  },
  afterFileAppend: function(element, value, master_element){
$('#F9-Log').append('&lt;li&gt;afterFileAppend - '+value+'&lt;/li&gt;')
  },
  onFileSelect: function(element, value, master_element){
$('#F9-Log').append('&lt;li&gt;onFileSelect - '+value+'&lt;/li&gt;')
  },
  afterFileSelect: function(element, value, master_element){
$('#F9-Log').append('&lt;li&gt;afterFileSelect - '+value+'&lt;/li&gt;')
  }
});
});</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>

		自动登录	找回密码
密码			立即注册