index.html

来自「jquery的多附件上传插件」· HTML 代码 · 共 983 行 · 第 1/3 页

      <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" onclick="$(this).parent().prev().click()"&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" 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('&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/>
     
    <h2>Advanced Usage</h2>
    <h3>Using your own selectors</h3>
    <pre class="code"><code class="js">$(function(){ // wait for document to load
  $('#MyFileUpload').MultiFile();
 });</code></pre>
    
    <h3>Setting limit via script</h3>
    <pre class="code"><code class="js">$(function(){ // wait for document to load
  $('#MyFileUpload').MultiFile(5 /*limit will be set to 5*/);
 });</code></pre>
    
    <h3>Advanced configuration</h3>
    <pre class="code"><code class="js">$(function(){ // wait for document to load
  $('#MyCoolFileUpload').MultiFile({
   max: 5,
   accept: 'gif|jpg|png|bmp|swf'
  });
 });</code></pre>
    
    <h3>Customising visible strings for multi-lingual support</h3>
    <pre class="code"><code class="js">$(function(){ // wait for document to load
  $('#PortugueseFileUpload').MultiFile({
   STRING: {
    remove:'Remover',
    selected:'Selecionado: $file',
    denied:'Invalido arquivo de tipo $ext!'
   }
  });
 });</code></pre>
    
   </div><!--// tab-Examples //-->
   
   <div id="tab-MultiLingual">
    <h2>Multi-lingual support</h2>
    <p>
     The plugin doesn't have any additional languages built-in, but it's very easy to
     customise the messages to any language of your choosing. See the examples below...
    </p>
    <p>
     NB.: This example has been configured to accept gif/pg files only in order to demonstrate the error messages.
    </p>
        <form action="" class="P10">
         <input type="file" class="multi {accept:'gif|jpg', max:3, STRING: {remove:'Remover',selected:'Selecionado: $file',denied:'Invalido arquivo de tipo $ext!',duplicate:'Arquivo ja selecionado:\n$file!'}}"/>
        </form>
 
          <h3>Method 1: Using class property (require MetaData plugin)</h3>
          <pre class="code"><code class="html">&lt;input type="file" class="<span style="color:#900">multi</span>
 <span style="color:#900">{accept:'gif|jpg', max:3, STRING:{
  remove:'Remover',
  selected:'Selecionado: $file',
  denied:'Invalido arquivo de tipo $ext!',
  duplicate:'Arquivo ja selecionado:\n$file!'
 }}</span>" /&gt;</code></pre>
 
          <h3>Method 2: Programatically by ID (ONE element only, does not require MetaData plugin)</h3>
          <pre class="code"><code class="html">&lt;input type="file" id="<span style="color:#900">PortugueseFileUpload</span>" /&gt;</code></pre>
          <pre class="code"><code class="js">$(function(){
  $('<span style="color:#900">#PortugueseFileUpload</span>').MultiFile({
   accept:'gif|jpg', max:3, STRING: {
    remove:'Remover',
    selected:'Selecionado: $file',
    denied:'Invalido arquivo de tipo $ext!',
    duplicate:'Arquivo ja selecionado:\n$file!'
   }
  });
 });</code></pre>
 
          <h3>Method 3: Programatically (<em>n</em> elements, does not require MetaData plugin)</h3>
          <a target="_blank" href="http://plugins.jquery.com/node/1251">See this feature request for details</a><br/>
 <pre class="code"><code class="html">&lt;input type="file" class="<span style="color:#900">multi-pt</span>" /&gt;
&lt;input type="file" class="<span style="color:#900">multi-pt</span>" /&gt;
&lt;input type="file" class="<span style="color:#900">multi-pt</span>" /&gt;</code></pre>
          <pre class="code"><code class="js">$(function(){
 $('<span style="color:#900">.multi-pt</span>').MultiFile({
  accept:'gif|jpg', max:3, STRING: {
   remove:'Remover',
   selected:'Selecionado: $file',
   denied:'Invalido arquivo de tipo $ext!',
   duplicate:'Arquivo ja selecionado:\n$file!'
  }
 });
});</code></pre>
 
   </div><!--// tab-MultiLingual //-->
   
   <div id="tab-Uploading">
    <h2>Can this plugin upload files?</h2>
    <p class="Big Warning">No, this jQuery plugin does not upload files</p>
    <p>
     Javascript is a client side language and cannot upload files -
     this plugin will only go as far as helping the user select the files
     to upload and assisting in the validation process by warning the user of common
     mistakes before server-side validation takes place.
     When the form is submitted, <strong>it's up to you</strong> to have
     a server-side script that will actually upload the files.
    </p>
    <p>
     <span style="color:#FF0000">Please do not email me asking how to do this!!!</span>
     There is plenty of information out there and you can easily
     <a target="_blank" href="http://www.google.co.uk/search?hl=en&rls=GGGL%2CGGGL%3A2006-14%2CGGGL%3Aen&q=how+to+upload+files+in+php&btnG=Search&meta=">find it on Google</a>.
     But because I'm such a nice guy, I've put a quick list of the best links here:
    </p>
    <h3>ASP users</h3>
    <p>
     <a target="_blank" href="http://www.freeaspupload.net/">FreeASPUpload</a> - Free, easy to use and no component required. This is my favourite.
    </p>
    <h3>PHP users</h3>
    <p>
     See <strong>File Upload Tutorials</strong> from
     <a target="_blank" href="http://www.w3schools.com/php/php_file_upload.asp">W3CSchools</a>,
     <a target="_blank" href="http://php.about.com/od/advancedphp/ss/php_file_upload.htm">About.com</a>,
     <a target="_blank" href="http://www.tizag.com/phpT/fileupload.php">Tizag</a>
    </p>
    <p>
     <u class="Warning">NOTICE TO PHP USERS</u>:
     The plugin's default behaviour generates an array of elements (sharing the same name).
     In order for this array to be properly identified and handled in PHP, you have add "[]" to name of your element.<br/>
     eg.:
     <pre class="code"><code class="html">&lt;input type="file" name="MyStuff[]"...</code></pre>
    </p>
    
    <br/><br/>
    
    <h2>Having problems?</h2>
    <p>
     1. Make sure your form has <strong>method=POST</strong> and <strong>enctype=multipart/form-data</strong>
    </p>
    <p>
     2. Are you using valid (x)HTML? Invalid markup can stop the form from being submitted altogether
    </p>
    <p>
     3. Are you using the correct element names as required/expected by your server-side script?
    </p>
    <p>
     4. Have you tried uploading a single file without using the plugin? Makes sure this works before submitting a bug report
    </p>
    
    <br/><br/>
    
    <h2>I promise I can upload my own files. What do I need to know?</h2>
    <p>
     You should know that the plugin works by hiding elements with a selected file
     and creating new empty elements. This means when submitting the form, there
     will always be an empty item at the end of the list of files.
     Actually, that would have been a problem but this plugin takes care of disabling
     all dummy empty file inputs for you before the form gets submitted -
     be it via ajax or natively. So this is good to know, but it's not something
     you need to worry about.
    </p>
    <p>
     However, if you are submitting the form programmatically via javascript, you must call this <strong>before</strong> submitting the form....
     <pre class="code"><code class="js">$.MultiFile.disableEmpty(); // before submiting the form</code></pre>
    </p>
    <p>
     And if you're doing things the ajax way, you should call this when you're done to re-enable the dummy element:
     <pre class="code"><code class="js">$.MultiFile.reEnableEmpty(); // after submiting the form</code></pre>
    </p>
    
    <br/><br/>
    
    <h2>Ajax</h2>
    <p>
     You may use the jQuery <a href="http://www.malsup.com/jquery/form/">Form Plugin</a>
     to submit the form via ajax.
    </p>
    <h3>How do I reset the control?</h3>
    <p>
     To reset the file selections, just make the following call:
     <pre class="code"><code class="js">$('input:file').MultiFile('reset')</code></pre>
    </p>
   </div><!--// tab-Uploading //-->
   
   
   <!-- ############################ //-->
   
   
   <div id="tab-Download">
    <h2>Download</h2>
    <p>