| [ Index ] |
PHP Cross Reference of vtigercrm-6.1.0 |
[Summary view] [Print] [Text view]
1 <!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd'> 2 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 3 <head> 4 <title>jQuery Multiple File Upload Plugin v1.48 (2012-02-08)</title> 5 <!--// documentation resources //--> 6 <script src='jquery.js' type="text/javascript"></script> 7 <script src='documentation/documentation.js' type="text/javascript"></script> 8 <link href='documentation/documentation.css' type="text/css" rel="stylesheet"/> 9 <!--// code-highlighting //--> 10 <script type="text/javaScript" src="documentation/chili/jquery.chili-2.0.js"></script> 11 <!--//documentation/chili-toolbar/jquery.chili-toolbar.pack.js//--> 12 <script type="text/javascript">try{ChiliBook.recipeFolder="documentation/chili/"}catch(e){}</script> 13 <!--// plugin-specific resources //--> 14 <script src='jquery.form.js' type="text/javascript" language="javascript"></script> 15 <script src='jquery.MetaData.js' type="text/javascript" language="javascript"></script> 16 <script src='jquery.MultiFile.js' type="text/javascript" language="javascript"></script> 17 <script src='jquery.blockUI.js' type="text/javascript" language="javascript"></script> 18 </head> 19 <body> 20 <div class="Clear" id="wrap"> 21 <div class="Clear" id="head"> 22 <table width="100%" cellspacing="10"> 23 <tr> 24 <td valign="middle" width="120"> 25 <a href="/jquery/"><img src="documentation/fyneworks.png" width="101" height="24" alt="Fyneworks" /></a> 26 </td> 27 <td valign="middle" width="10"> </td> 28 <td valign="middle"> 29 <h1 style="float:left;">jQuery Multiple File Upload Plugin</h1> 30 v<strong style="color:#000;">1.48 (2012-02-08)</strong> 31 </td> 32 <td valign="middle" width="90" align="right"> 33 <strong style="color:#900;">Buy us a pint</strong>: 34 </td> 35 <td valign="middle" width="120" align="right"> 36 <img src="documentation/beer.png" width="24" height="32" alt="Beer" style="float:left" /> 37 <form action="https://www.paypal.com/cgi-bin/webscr" method="post" style="float:left"> 38 <input type="hidden" name="cmd" value="_s-xclick"> 39 <input type="hidden" name="hosted_button_id" value="6856904"> 40 <input type="image" src="documentation/paypal.png" width="81" height="32" border="0" name="submit" alt="Donate"> 41 <img alt="" border="0" src="https://www.paypal.com/en_GB/i/scr/pixel.gif" width="1" height="1"> 42 </form> 43 </td> 44 <td valign="middle" width="90" align="right"> 45 <strong style="color:#090;">Stay tuned</strong>: 46 </td> 47 <td valign="middle" width="98" align="right"> 48 <a href="http://plus.google.com/106186719756358832500" target="_blank"><img src="documentation/gplus.png" width="32" height="32" alt="+1" 49 /></a><a href="http://www.facebook.com/fyneworks" target="_blank"><img src="documentation/facebook.png" width="32" height="32" alt="Like" 50 /></a><a href="http://www.twitter.com/fyneworks" target="_blank"><img src="documentation/twitter.png" width="32" height="32" alt="Follow" /></a> 51 </td> 52 <td valign="middle" width="5"> </td> 53 </tr> 54 </table> 55 </div> 56 <div class="Clear" id="body"> 57 <div class="Clear" id="ad"> 58 <!--// 59 <div id='vu_ytplayer_vjVQa1PpcFNzWL_xJNUOpZhjtZP7PE8aGHuLQqHHrFI='><a href='http://www.youtube.com/browse'>Watch the latest videos on YouTube.com</a></div> 60 <script type='text/javascript' src='http://www.youtube.com/watch_custom_player?id=vjVQa1PpcFNzWL_xJNUOpZhjtZP7PE8aGHuLQqHHrFI='></script> 61 //--> 62 <script type="text/javascript"><!-- 63 google_ad_client = "pub-9465008056978568"; 64 /* 120x600, created 25/11/09 */ 65 google_ad_slot = "4176621808"; 66 google_ad_width = 120; 67 google_ad_height = 600; 68 //--></script> 69 <script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"></script> 70 </div> 71 <div class="Clear" id="documentation"> 72 <div class="tabs"> 73 <ul class="Clear"> 74 75 <li><a href="#tab-Overview" id="btn-Overview">Overview</a></li> 76 <li><a href="#tab-Examples" id="btn-Examples">Examples</a></li> 77 <li><a href="#tab-MultiLingual" id="btn-MultiLingual">Locale</a></li> 78 <li><a href="#tab-Uploading" id="btn-Uploading">Uploading</a></li> 79 <li><a href="#tab-Download" id="btn-Download">Download</a></li> 80 <li><a href="#tab-Support" id="btn-Support">Support</a></li> 81 82 <li><a href="#tab-License" id="btn-License">License</a></li> 83 <li><a href="#tab-More" id="btn-More">More</a></li> 84 </ul><!--// tabs //--> 85 <!--// 86 #################################### 87 # 88 # * START CONTENT * 89 # 90 #################################### 91 //--> 92 93 94 95 96 97 98 99 100 101 <div id="tab-Overview"> 102 <h2>What <span style="color:green;">this is</span></h2> 103 <p> 104 This <strong>jQuery Multiple File Upload Plugin</strong> (<code>$.MultiFile</code>) 105 is a non-obstrusive plugin for <a href="http://www.jquery.com/">jQuery</a> 106 that helps users easily select multiple files for upload quickly and easily 107 on your <a href="http://www.webhostingsearch.com/">hosting server</a> 108 whilst also providing some basic validation functionality to help developers 109 idenfity simple errors, without having to submit the form (ie.: upload files). 110 </p> 111 112 <h2>What <span style="color:red;">this isn't</span></h2> 113 <p> 114 This plugin will not create a dialog that allows the user to select multiple files at once. 115 That simply cannot be done via javascript. If that's what you need, you should consider using 116 <a href="http://www.w3schools.com/html5/att_input_multiple.asp">HTML5's <code>multiple="multiple"</code> attribute</a> 117 or one of the many other 118 <a href="https://www.google.co.uk/search?q=flash+upload">flash based file upload solutions</a> 119 (eg.: <a href="http://swfupload.org">SWFupload</a>, <a href="http://www.uploadify.com/">uploadify</a> and others) 120 </p> 121 122 <h2>How it works</h2> 123 <p> 124 The plugin creates a new file input element every time the user select a file, 125 which allows the user to select a file, then another, then another, then another and so on... 126 selecting as many files is required, <strong>one at a time</strong>. 127 </p> 128 129 <h2>How do I use it?</h2> 130 <table cellspacing="0" width="100%"> 131 <tr> 132 <td valign="top" width="30%"> 133 <p> 134 Just add the <code><strong>multi</strong></code> class to your file input element. 135 </p> 136 <pre class="code"><code class="html"><input type="file" class="multi"/></code></pre> 137 <br/><br/> 138 <input type="file" class="multi"/> 139 </td> 140 <td valign="top" width="20"> </td> 141 <td valign="top" width="30%"> 142 <p> 143 Use the <code><strong>maxlength</strong></code> property if you want to limit the number of files selected. 144 (<span style="font-weight:bold; color:red;">server-side validation is always required</span>) 145 </p> 146 <pre class="code"><code class="html"><input type="file" class="multi" maxlength="2"/></code></pre> 147 <br/><br/> 148 <input type="file" class="multi" maxlength="2"/> 149 </td> 150 <td valign="top" width="20"> </td> 151 <td valign="top" width="30%"> 152 <p> 153 Use the <code><strong>accept</strong></code> property if you only want files of a certain extension to be selected 154 Separate valid extensions with a "|", like this: "jpg|gif|png". 155 (<span style="font-weight:bold; color:red;">server-side validation is always required</span>) 156 </p> 157 <pre class="code"><code class="html"><input type="file" class="multi" accept="gif|jpg"/></code></pre> 158 <br/><br/> 159 <input type="file" class="multi" accept="gif|jpg"/> 160 </td> 161 </tr> 162 </table> 163 </div><!--// tab-Overview //--> 164 165 <div id="tab-Examples"> 166 167 <h2>Using HTML</h2> 168 <table summary="MultiFile Upload Demos" width="100%" cellspacing="10"> 169 <tr> 170 <td valign="top" width="33%"> 171 <fieldset style="border:0"> 172 <legend><strong>Example 1</strong></legend> 173 <code class=""> 174 class="multi" maxlength="2" 175 </code> 176 <div class="P5 B"> 177 Limit: 2 files. 178 <br/> 179 Allowed extensions: any. 180 </div> 181 <form action="" class="P10"> 182 <input type="file" class="multi" maxlength="2"/> 183 </form> 184 </fieldset> 185 </td> 186 <td valign="top" width="33%"> 187 <fieldset style="border:0"> 188 <legend><strong>Example 2</strong></legend> 189 <code class=""> 190 class="multi" accept="gif|jpg" 191 </code> 192 <div class="P5 B"> 193 Limit: no limit. 194 <br/> 195 Allowed extensions: gif and jpg. 196 </div> 197 <form action="" class="P10"> 198 <input type="file" class="multi" accept="gif|jpg"/> 199 </form> 200 </fieldset> 201 </td> 202 <td valign="top" width="33%"> 203 <fieldset style="border:0"> 204 <legend><strong>Example 3</strong></legend> 205 <code class=""> 206 class="multi" accept="gif|jpg" maxlength="3" 207 </code> 208 <div class="P5 B"> 209 Limit: 3 files 210 <br/> 211 Allowed extensions: gif, jpg. 212 </div> 213 <form action="" class="P10"> 214 <input type="file" class="multi" accept="gif|jpg" maxlength="3"/> 215 </form> 216 <div class="P5 Warning Bold"> 217 Note that server-side validation is always required 218 </div> 219 </fieldset> 220 </td> 221 </tr> 222 </table> 223 224 <hr/> 225 226 <h2>Using class property</h2> 227 <table summary="MultiFile Upload Demos" width="100%" cellspacing="10"> 228 <tr> 229 <td valign="top" width="33%"> 230 <fieldset style="border:0"> 231 <legend><strong>Example 4</strong></legend> 232 <code class=""> 233 class="multi max-2" 234 </code> 235 <div class="P5 B"> 236 Limit: 2 files. 237 <br/> 238 Allowed extensions: any. 239 </div> 240 <form action="" class="P10"> 241 <input type="file" class="multi max-2"/> 242 </form> 243 </fieldset> 244 </td> 245 <td valign="top" width="33%"> 246 <fieldset style="border:0"> 247 <legend><strong>Example 5</strong></legend> 248 <code class=""> 249 class="multi accept-gif|jpg" 250 </code> 251 <div class="P5 B"> 252 Limit: no limit. 253 <br/> 254 Allowed extensions: gif, jpg. 255 </div> 256 <form action="" class="P10"> 257 <input type="file" class="multi accept-gif|jpg"/> 258 </form> 259 </fieldset> 260 </td> 261 <td valign="top" width="33%"> 262 <fieldset style="border:0"> 263 <legend><strong>Example 6</strong></legend> 264 <code class=""> 265 class="multi max-3 accept-gif|jpg" 266 </code> 267 <div class="P5 B"> 268 Limit: 3 files 269 <br/> 270 Allowed extensions: gif, jpg. 271 </div> 272 <form action="" class="P10"> 273 <input type="file" class="multi max-3 accept-gif|jpg"/> 274 </form> 275 <div class="P5 Warning Bold"> 276 Note that server-side validation is always required 277 </div> 278 </fieldset> 279 </td> 280 </tr> 281 </table> 282 283 <hr/> 284 285 <h2>Moving the file list</h2> 286 <table summary="MultiFile Upload Demos" width="100%" cellspacing="10"> 287 <tr> 288 <td valign="top" width="50%"> 289 <fieldset style="border:0"> 290 <legend><strong>Example 7</strong></legend> 291 <p>This example populates the file list in a custom element</p> 292 <pre class="code"><code class="js">$(function(){ // wait for document to load 293 $('#T7').MultiFile({ 294 list: '#T7-list' 295 }); 296 });</code></pre> 297 <script type="text/javascript" language="javascript"> 298 $(function(){ // wait for document to load 299 $('#T7').MultiFile({ 300 list: '#T7-list' 301 }); 302 }); 303 </script> 304 </fieldset> 305 </td> 306 <td valign="top" width="50%"> 307 <form action="" class="P10"> 308 <input type="file" id="T7"/> 309 </form> 310 <div id="T7-list" style="border:#999 solid 3px; padding:10px;"> 311 This is div#T7-list - selected files will be populated here... 312 <br/><br/> 313 </div> 314 </td> 315 </tr> 316 </table> 317 318 319 <hr/> 320 321 <h2>Customising the file list</h2> 322 <table summary="MultiFile Upload Demos" width="100%" cellspacing="10"> 323 <tr> 324 <td valign="top" width="50%"> 325 <fieldset style="border:0"> 326 <legend><strong>Example 8 A</strong></legend> 327 <p>Use a custom 'remove' image in the file list</p> 328 <pre class="code"><code class="js">$(function(){ // wait for document to load 329 $('#T8A').MultiFile({ 330 STRING: { 331 remove: '<img src="/i/bin.gif" height="16" width="16" alt="x"/>' 332 } 333 }); 334 });</code></pre> 335 <script type="text/javascript" language="javascript"> 336 $(function(){ // wait for document to load 337 $('#T8A').MultiFile({ 338 STRING: { 339 remove: '<img src="/i/bin.gif" height="16" width="16" alt="x"/>' 340 } 341 }); 342 }); 343 </script> 344 </fieldset> 345 </td> 346 <td valign="top" width="50%"> 347 <form action="" class="P10"> 348 <input type="file" id="T8A"/> 349 </form> 350 </td> 351 </tr> 352 </table> 353 354 <table summary="MultiFile Upload Demos" width="100%" cellspacing="10"> 355 <tr> 356 <td valign="top" width="50%"> 357 <fieldset style="border:0"> 358 <legend><strong>Example 8 B</strong></legend> 359 <p>Customising all list content</p> 360 <pre class="code"><code class="js">$(function(){ // wait for document to load 361 $('#T8B').MultiFile({ 362 STRING: { 363 file: '<em title="Click to remove" onclick="$(this).parent().prev().click()">$file</em>', 364 remove: '<img src="/i/bin.gif" height="16" width="16" alt="x"/>' 365 } 366 }); 367 });</code></pre> 368 <script type="text/javascript" language="javascript"> 369 $(function(){ // wait for document to load 370 $('#T8B').MultiFile({ 371 STRING: { 372 file: '<em title="Click to remove" onclick="$(this).parent().prev().click()">$file</em>', 373 remove: '<img src="/i/bin.gif" height="16" width="16" alt="x"/>' 374 } 375 }); 376 }); 377 </script> 378 </fieldset> 379 </td> 380 <td valign="top" width="50%"> 381 <form action="" class="P10"> 382 <input type="file" id="T8B"/> 383 </form> 384 </td> 385 </tr> 386 </table> 387 388 <hr/> 389 390 <h2>Using events</h2> 391 <table summary="MultiFile Upload Demos" width="100%" cellspacing="10"> 392 <tr> 393 <td valign="top" width="50%"> 394 <fieldset style="border:0"> 395 <legend><strong>Example 9</strong></legend> 396 <p> 397 The events available are:<br/> 398 onFileAppend, afterFileAppend, 399 onFileSelect, afterFileSelect, 400 onFileRemove, afterFileRemove 401 </p> 402 <p> 403 The arguments passed on to each event handler are:<br/> 404 element: file element which triggered the event<br/> 405 value: the value of the element in question<br/> 406 master_element: the original element containing all relevant settings 407 </p> 408 <pre class="code"><code class="js">$(function(){ // wait for document to load 409 $('#T9').MultiFile({ 410 onFileRemove: function(element, value, master_element){ 411 $('#F9-Log').append('<li>onFileRemove - '+value+'</li>') 412 }, 413 afterFileRemove: function(element, value, master_element){ 414 $('#F9-Log').append('<li>afterFileRemove - '+value+'</li>') 415 }, 416 onFileAppend: function(element, value, master_element){ 417 $('#F9-Log').append('<li>onFileAppend - '+value+'</li>') 418 }, 419 afterFileAppend: function(element, value, master_element){ 420 $('#F9-Log').append('<li>afterFileAppend - '+value+'</li>') 421 }, 422 onFileSelect: function(element, value, master_element){ 423 $('#F9-Log').append('<li>onFileSelect - '+value+'</li>') 424 }, 425 afterFileSelect: function(element, value, master_element){ 426 $('#F9-Log').append('<li>afterFileSelect - '+value+'</li>') 427 } 428 }); 429 });</code></pre> 430 <script type="text/javascript" language="javascript"> 431 $(function(){ // wait for document to load 432 $('#T9').MultiFile({ 433 onFileRemove: function(element, value, master_element){ 434 $('#F9-Log').append('<li>onFileRemove - '+value+'</li>') 435 }, 436 afterFileRemove: function(element, value, master_element){ 437 $('#F9-Log').append('<li>afterFileRemove - '+value+'</li>') 438 }, 439 onFileAppend: function(element, value, master_element){ 440 $('#F9-Log').append('<li>onFileAppend - '+value+'</li>') 441 }, 442 afterFileAppend: function(element, value, master_element){ 443 $('#F9-Log').append('<li>afterFileAppend - '+value+'</li>') 444 }, 445 onFileSelect: function(element, value, master_element){ 446 $('#F9-Log').append('<li>onFileSelect - '+value+'</li>') 447 }, 448 afterFileSelect: function(element, value, master_element){ 449 $('#F9-Log').append('<li>afterFileSelect - '+value+'</li>') 450 } 451 }); 452 }); 453 </script> 454 </fieldset> 455 </td> 456 <td valign="top" width="50%"> 457 <form action="" class="P10"> 458 <input type="file" id="T9"/> 459 </form> 460 <div style="border:#999 solid 3px; padding:10px;"> 461 This is div#F9-Log - selected files will be populated here... 462 <br/> 463 <ul id="F9-Log"> 464 465 </ul> 466 </div> 467 </td> 468 </tr> 469 </table> 470 471 <hr/> 472 473 <h2>Advanced Usage</h2> 474 <h3>Using your own selectors</h3> 475 <pre class="code"><code class="js">$(function(){ // wait for document to load 476 $('#MyFileUpload').MultiFile(); 477 });</code></pre> 478 479 <h3>Setting limit via script</h3> 480 <pre class="code"><code class="js">$(function(){ // wait for document to load 481 $('#MyFileUpload').MultiFile(5 /*limit will be set to 5*/); 482 });</code></pre> 483 484 <h3>Advanced configuration</h3> 485 <pre class="code"><code class="js">$(function(){ // wait for document to load 486 $('#MyCoolFileUpload').MultiFile({ 487 max: 5, 488 accept: 'gif|jpg|png|bmp|swf' 489 }); 490 });</code></pre> 491 492 <h3>Customising visible strings for multi-lingual support</h3> 493 <pre class="code"><code class="js">$(function(){ // wait for document to load 494 $('#PortugueseFileUpload').MultiFile({ 495 STRING: { 496 remove:'Remover', 497 selected:'Selecionado: $file', 498 denied:'Invalido arquivo de tipo $ext!' 499 } 500 }); 501 });</code></pre> 502 503 </div><!--// tab-Examples //--> 504 505 <div id="tab-MultiLingual"> 506 <h2>Multi-lingual support</h2> 507 <p> 508 The plugin doesn't have any additional languages built-in, but it's very easy to 509 customise the messages to any language of your choosing. See the examples below... 510 </p> 511 <p> 512 NB.: This example has been configured to accept gif/pg files only in order to demonstrate the error messages. 513 </p> 514 <form action="" class="P10"> 515 <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!'}}"/> 516 </form> 517 518 <h3>Method 1: Using class property (require MetaData plugin)</h3> 519 <pre class="code"><code class="html"><input type="file" class="<span style="color:#900">multi</span> 520 <span style="color:#900">{accept:'gif|jpg', max:3, STRING:{ 521 remove:'Remover', 522 selected:'Selecionado: $file', 523 denied:'Invalido arquivo de tipo $ext!', 524 duplicate:'Arquivo ja selecionado:\n$file!' 525 }}</span>" /></code></pre> 526 527 <h3>Method 2: Programatically by ID (ONE element only, does not require MetaData plugin)</h3> 528 <pre class="code"><code class="html"><input type="file" id="<span style="color:#900">PortugueseFileUpload</span>" /></code></pre> 529 <pre class="code"><code class="js">$(function(){ 530 $('<span style="color:#900">#PortugueseFileUpload</span>').MultiFile({ 531 accept:'gif|jpg', max:3, STRING: { 532 remove:'Remover', 533 selected:'Selecionado: $file', 534 denied:'Invalido arquivo de tipo $ext!', 535 duplicate:'Arquivo ja selecionado:\n$file!' 536 } 537 }); 538 });</code></pre> 539 540 <h3>Method 3: Programatically (<em>n</em> elements, does not require MetaData plugin)</h3> 541 <a target="_blank" href="http://plugins.jquery.com/node/1251">See this feature request for details</a><br/> 542 <pre class="code"><code class="html"><input type="file" class="<span style="color:#900">multi-pt</span>" /> 543 <input type="file" class="<span style="color:#900">multi-pt</span>" /> 544 <input type="file" class="<span style="color:#900">multi-pt</span>" /></code></pre> 545 <pre class="code"><code class="js">$(function(){ 546 $('<span style="color:#900">.multi-pt</span>').MultiFile({ 547 accept:'gif|jpg', max:3, STRING: { 548 remove:'Remover', 549 selected:'Selecionado: $file', 550 denied:'Invalido arquivo de tipo $ext!', 551 duplicate:'Arquivo ja selecionado:\n$file!' 552 } 553 }); 554 });</code></pre> 555 556 </div><!--// tab-MultiLingual //--> 557 558 <div id="tab-Uploading"> 559 <h2>Can this plugin upload files?</h2> 560 <p class="Big Warning">No, this jQuery plugin does not upload files</p> 561 <p> 562 Javascript is a client side language and cannot upload files - 563 this plugin will only go as far as helping the user select the files 564 to upload and assisting in the validation process by warning the user of common 565 mistakes before server-side validation takes place. 566 When the form is submitted, <strong>it's up to you</strong> to have 567 a server-side script that will actually upload the files. 568 </p> 569 <p> 570 <span style="color:#FF0000">Please do not email me asking how to do this!!!</span> 571 There is plenty of information out there and you can easily 572 <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>. 573 But because I'm such a nice guy, I've put a quick list of the best links here: 574 </p> 575 <h3>ASP users</h3> 576 <p> 577 <a target="_blank" href="http://www.freeaspupload.net/">FreeASPUpload</a> - Free, easy to use and no component required. This is my favourite. 578 <br/> 579 <a href="http://www.asp101.com/articles/jacob/scriptupload.asp">Pure ASP File Upload</a> by Jacob Gilley 580 <br/> 581 <a href="http://www.freevbcode.com/ShowCode.asp?ID=4596">File Upload via ASP (Pure ASP Solution, no .DLL)</a> 582 </p> 583 <h3>PHP users</h3> 584 <p> 585 See <strong>File Upload Tutorials</strong> from 586 <a target="_blank" href="http://www.w3schools.com/php/php_file_upload.asp">W3CSchools</a>, 587 <a target="_blank" href="http://php.about.com/od/advancedphp/ss/php_file_upload.htm">About.com</a>, 588 <a target="_blank" href="http://www.tizag.com/phpT/fileupload.php">Tizag</a> 589 </p> 590 <p> 591 <u class="Warning">NOTICE TO PHP USERS</u>: 592 The plugin's default behaviour generates an array of elements (sharing the same name). 593 In order for this array to be properly identified and handled in PHP, you have to add "[]" to name of your element.<br/> 594 eg.: 595 <pre class="code"><code class="html"><input type="file" name="MyStuff[]"...</code></pre> 596 </p> 597 598 <br/><br/> 599 600 <h2>Having problems?</h2> 601 <p> 602 1. Make sure your form has <strong>method=POST</strong> and <strong>enctype=multipart/form-data</strong> 603 </p> 604 <p> 605 2. Are you using valid (x)HTML? Invalid markup can stop the form from being submitted altogether 606 </p> 607 <p> 608 3. Are you using the correct element names as required/expected by your server-side script? 609 </p> 610 <p> 611 4. Have you tried uploading a single file without using the plugin? Makes sure this works before submitting a bug report 612 </p> 613 614 <br/><br/> 615 616 <h2>I promise I can upload my own files. What do I need to know?</h2> 617 <p> 618 You should know that the plugin works by hiding elements with a selected file 619 and creating new empty elements. This means when submitting the form, there 620 will always be an empty item at the end of the list of files. 621 Actually, that would have been a problem but this plugin takes care of disabling 622 all dummy empty file inputs for you before the form gets submitted - 623 be it via ajax or natively. So this is good to know, but it's not something 624 you need to worry about. 625 </p> 626 <p> 627 However, if you are submitting the form programmatically via javascript, you must call this <strong>before</strong> submitting the form.... 628 <pre class="code"><code class="js">$.fn.MultiFile.disableEmpty(); // before submiting the form</code></pre> 629 </p> 630 <p> 631 And if you're doing things the ajax way, you should call this when you're done to re-enable the dummy element: 632 <pre class="code"><code class="js">$.fn.MultiFile.reEnableEmpty(); // after submiting the form</code></pre> 633 </p> 634 635 <br/><br/> 636 637 <h2>Ajax</h2> 638 <p> 639 You may use the jQuery <a href="http://www.malsup.com/jquery/form/">Form Plugin</a> 640 to submit the form via ajax. 641 </p> 642 <h3>How do I reset the control?</h3> 643 <p> 644 To reset the file selections, just make the following call: 645 <pre class="code"><code class="js">$('input:file').MultiFile('reset')</code></pre> 646 </p> 647 </div><!--// tab-Uploading //--> 648 649 650 <!-- ############################ //--> 651 652 653 <div id="tab-Download"> 654 <h2>Download</h2> 655 <p> 656 This project (and all related files) can also be accessed via its 657 <a target="_blank" href="http://code.google.com/p/jquery-multifile-plugin/">Google Code Project Page</a>. 658 </p> 659 <table cellspacing="5"> 660 <tr> 661 <td valign="top" align="right">Full Package:</td> 662 <td valign="top"> 663 <big> 664 <img src="documentation/download.gif" style="margin:0 5px 5px 0; float:left;"> 665 v<strong>1.48</strong> 666 <a href="http://jquery-multifile-plugin.googlecode.com/svn/trunk/multiple-file-upload.zip"><strong>multiple-file-upload.zip</strong></a> 667 </big> 668 </td> 669 </tr> 670 <tr> 671 <td valign="top" align="right"></td> 672 <td valign="top"> 673 <div class="Clear" style="margin:0 0 10px 0;" onClick="$('a:eq(0)',this).click()"> 674 <strong class="Yes" style="background:#090; color:#fff; padding:3px;">Stay up-to-date!</strong> 675 <span style="padding:3px;"> 676 Major updates will be announced on 677 <a target="_blank" href="http://twitter.com/fyneworks" class="external">Twitter</a>: 678 <a target="_blank" href="http://twitter.com/fyneworks" class="external">@fyneworks</a> 679 </span> 680 </div> 681 </td> 682 </tr> 683 <tr> 684 <td valign="top" align="right">Core Files:</td> 685 <td valign="top"> 686 These are the individual required files (<span class="Warning">already included in the zip package above</span>) 687 <ul> 688 <li><a href="http://jquery-multifile-plugin.googlecode.com/svn/trunk/jquery.MultiFile.js"><strong>jQuery.MultiFile.js</strong></a> 689 (packed version: <a href="http://jquery-multifile-plugin.googlecode.com/svn/trunk/jquery.MultiFile.pack.js">jQuery.MultiFile.pack.js</a>)</li> 690 </ul> 691 </td> 692 </tr> 693 <tr> 694 <td valign="top" align="right">jQuery:</td> 695 <td valign="top"> 696 <a target="_blank" href="http://jquery.com/src/jquery-latest.js">jquery-latest.js</a> (<a target="_blank" href="http://www.jquery.com/">see jQuery.com</a>) 697 </td> 698 </tr> 699 </table> 700 <p> 701 Download <a href="http://www.activextest.com/">www.activextest.com</a> program for free and keep your computer protected for improved speed, performance and operation! 702 </p> 703 704 <h2>Related Downloads</h2> 705 <table cellspacing="5"> 706 <tr> 707 <td valign="top" align="right">Related:</td> 708 <td valign="top"> 709 <a target="_blank" href="http://plugins.jquery.com/project/metadata/">Metadata plugin</a> - Used to retrieve inline configuration from class variable 710 <br/> 711 <a target="_blank" href="http://www.malsup.com/jquery/blockUI/">blockUI plugin</a> - Used to show pretty error messages 712 <br/> 713 <a target="_blank" href="http://www.malsup.com/jquery/form/">Form plugin</a> - Used to submit forms via ajax 714 </td> 715 </tr> 716 </table> 717 718 <h2>Installation</h2> 719 <h3>Required Files</h3> 720 <pre class="code"><code class="html"><script src="jquery-latest.js" type="text/javascript" language="javascript"></script> 721 <script src="jquery.MultiFile.js" type="text/javascript" language="javascript"></script> 722 </code></pre> 723 <h3>Optional Files</h3> 724 <p> 725 <a target="_blank" href="http://plugins.jquery.com/project/metadata/"><u>Metadata Plugin</u></a> 726 <br/> 727 This great plugin can be used to configure the plugin via the class parameter.<br/> 728 <small>You can also <a href='jquery.MetaData.js'>download the version being used on this page</a></small> 729 </p> 730 <p> 731 <a target="_blank" href="http://www.malsup.com/jquery/block/"><u>BlockUI Plugin</u></a> 732 <br/> 733 Used to show 'pretty' error messages, instead of the browser's alert() function.<br/> 734 <small>You can also <a href='jquery.blockUI.js'>download the version being used on this page</a></small> 735 </p> 736 <p> 737 <a target="_blank" href="http://www.malsup.com/jquery/form/"><u>Form Plugin</u></a> 738 <br/> 739 Used to submit forms via Ajax. 740 </p> 741 742 <h2>SVN Repository</h2> 743 <p> 744 If you're a major geek or if you really really want to stay up-to-date with 745 with future updates of this plugin, go ahead and plug yourself to the 746 <a target="_blank" href="http://code.google.com/p/jquery-multifile-plugin/">SVN Repository</a> 747 on the official 748 <a target="_blank" href="http://code.google.com/p/jquery-multifile-plugin/">Google Code Project Page</a>. 749 </p> 750 <table cellspacing="5"> 751 <tr> 752 <td valign="top" align="right">SVN Checkout:</td> 753 <td valign="top"> 754 <img src="documentation/js.gif" style="margin:0 5px 5px 0; float:left;"> 755 <a target="_blank" href="http://code.google.com/p/jquery-multifile-plugin/source/checkout"><strong>SVN Checkout Instructions</strong></a> 756 </td> 757 </tr> 758 <tr> 759 <td valign="top" align="right">Browse Online:</td> 760 <td valign="top"> 761 <img src="documentation/folder.gif" style="margin:0 5px 5px 0; float:left;"> 762 <a target="_blank" href="http://code.google.com/p/jquery-multifile-plugin/source/browse/"><strong>Browse Source</strong></a> 763 </td> 764 </tr> 765 </table> 766 767 <h2>Alternative Download - From this website</h2> 768 <p> 769 Just in case it's the end of the world and the Google Code site becomes unavailable, 770 the project files can also be downloaded from this site. 771 <br/> 772 However, please note that this site is updated periodically whereas the Google Code 773 project is kept up-to-date almost instantaneously. If you'd like the very latest 774 version of this plugin 775 <strong>you are advised to use the links above and download the files from Google Code</strong> 776 - this will ensure the files you download have the very latest features and bug fixes. 777 </p> 778 <table cellspacing="5"> 779 <tr> 780 <td valign="top" align="right">Full Package:</td> 781 <td valign="top"> 782 <img src="documentation/download.gif" style="margin:0 5px 5px 0; float:left;"> 783 v<strong>1.48</strong> 784 <a href="./multiple-file-upload.zip"><strong>multiple-file-upload.zip</strong></a> 785 </td> 786 </tr> 787 <tr> 788 <td valign="top" align="right"></td> 789 <td valign="top"> 790 <div class="Clear" style="margin:0 0 10px 0;" onClick="$('a:eq(0)',this).click()"> 791 <strong class="Yes" style="background:#090; color:#fff; padding:3px;">Stay up-to-date!</strong> 792 <span style="padding:3px;"> 793 Major updates will be announced on 794 <a target="_blank" href="http://twitter.com/fyneworks" class="external">Twitter</a>: 795 <a target="_blank" href="http://twitter.com/fyneworks" class="external">@fyneworks</a> 796 </span> 797 </div> 798 </td> 799 </tr> 800 <tr> 801 <td valign="top" align="right">Core Files:</td> 802 <td valign="top"> 803 These are the individual required files (<span class="Warning">already included in the zip package above</span>) 804 <ul> 805 <li><a href='./jquery.MultiFile.js'><strong>jQuery.MultiFile.js</strong></a> (packed version: <a href="./jquery.MultiFile.pack.js">jQuery.MultiFile.pack.js</a>)</li> 806 </ul> 807 </td> 808 </tr> 809 <tr> 810 <td valign="top" align="right">jQuery:</td> 811 <td valign="top"> 812 <a target="_blank" href="http://jquery.com/src/jquery-latest.js">jquery-latest.js</a> (<a target="_blank" href="http://www.jquery.com/">see jQuery.com</a>) 813 </td> 814 </tr> 815 </table> 816 817 </div><!--// tab-Download //--> 818 819 <div id="tab-Support"> 820 821 <h2>Support</h2> 822 <p> 823 Quick Support Links: <a href="http://groups.google.com/group/jquery-en" class="B Yes">Help me!</a> 824 | <a target="_blank" href="http://code.google.com/p/jquery-multifile-plugin/issues/entry">Report a bug</a> 825 | <a target="_blank" href="http://code.google.com/p/jquery-multifile-plugin/issues/entry">Suggest new feature</a> 826 <!--// 827 OLD: Forget Trac - Let's use Google Code! 828 | <a target="_blank" href="http://plugins.jquery.com/node/add/project_issue/MultiFile/bug">Report a bug</a> 829 | <a target="_blank" href="http://plugins.jquery.com/node/add/project_issue/MultiFile/feature">Suggest new feature</a> 830 //--> 831 </p> 832 <p> 833 Support for this plugin is available through the <a target="_blank" href="http://jquery.com/discuss/" class="external">jQuery Mailing List</a>. 834 This is a very active list to which many jQuery developers and users subscribe. 835 <br/> 836 Access to the jQuery Mailing List is also available through 837 <a target="_blank" href="http://www.nabble.com/JQuery-f15494.html" class="external">Nabble Forums</a> 838 and the 839 <a target="_blank" href="http://groups.google.com/group/jquery-en" class="external">jQuery Google Group</a>. 840 </p> 841 <p> 842 <strong class="Warning">WARNING:</strong> 843 Support will not be provided via the <a href="http://plugins.jquery.com/">jQuery Plugins</a> 844 website. 845 If you need help, please direct your questions to the 846 <a target="_blank" href="http://groups.google.com/group/jquery-en" class="external">jQuery Mailing List</a> 847 or 848 <a target="_blank" href="http://code.google.com/p/jquery-multifile-plugin/issues/entry">report an issue</a> 849 on the official 850 <a target="_blank" href="http://code.google.com/p/jquery-multifile-plugin/">Google Code Project Page</a>. 851 </p> 852 853 <h2>Official Links</h2> 854 <ul> 855 <li><a target="_blank" href="http://plugins.jquery.com/project/MultiFile/" class="external">jQuery Plugin Project Page</a></li> 856 <li><a target="_blank" href="http://code.google.com/p/jquery-multifile-plugin/">Google Code Project Page</a></li> 857 </ul> 858 859 <h2>Credit where it's due...</h2> 860 <ul> 861 <li>Fyneworks.com <a href="http://www.fyneworks.com/">professional web design</a> and <a href="http://www.fyneworks.com/">google SEO experts</a></li> 862 <li>Dean Edwards - Author of <a href="http://dean.edwards.name/packer/">JS Packer</a> used to compress the plugin</li> 863 <li>Adrian Wróbel - Fixed a nasty bug so the script could work perfectly in Opera</li> 864 <li>Jonas Wagner - Modified plugin so newly created elements are an exact copy of the original element (ie.: persists attributes)</li> 865 <li>Mike Alsup - Author of several <a href="http://www.malsup.com/jquery/">jQuery Plugins</a>... 866 <ul> 867 <li>Suggested solution to element naming convention / server-side handling</li> 868 <li><a href="http://www.malsup.com/jquery/form/">Form plugin</a> - Used to submit forms via ajax</li> 869 <li><a href="http://www.malsup.com/jquery/blockUI/">blockUI plugin</a> - Used to show pretty error messages</li> 870 </ul> 871 </li> 872 <li>Julien Phalip - Identified conflict with variable name 'class' in several methods</li> 873 </ul> 874 </div><!--// tab-Support //--> 875 876 877 878 879 880 881 <!--// 882 #################################### 883 # 884 # * END CONTENT * 885 # 886 #################################### 887 //--> 888 <div id="tab-License"> 889 <h2>What's the catch?</h2> 890 <p> 891 <strong>There's no catch</strong>. Use it, abuse it - even take it 892 apart and modify it if you know what you're doing. You don't have to, 893 but if you're feeling generous you can link back to this website (instructions below). 894 </p> 895 896 <h2>Attribute this work</h2> 897 <div class="license-info"> 898 <table cellspacing="5" width="100%"> 899 <tr> 900 <td width="90" align="right">Attribution link:</td> 901 <td valign="top">© <a href="http://www.fyneworks.com/">Fyneworks.com</a></td> 902 </tr> 903 <tr> 904 <td width="90" align="right">HTML Code:</td> 905 <td valign="top"> 906 <input type="text" onFocus="this.select();" onClick="this.select()" readonly="" style="width:100%;" 907 value="&copy; <a href="http://www.fyneworks.com/">Fyneworks.com</a>" 908 /> 909 </td> 910 </tr> 911 </table> 912 </div> 913 <h2>License Info</h2> 914 <div class="license-info"> 915 <table cellspacing="5" width="100%"> 916 <tr> 917 <td valign="middle"> 918 <strong>Multiple File Upload Plugin</strong> 919 by <a href="http://www.fyneworks.com/">Fyneworks.com</a> 920 is licensed under the 921 <a target="_blank" href="http://en.wikipedia.org/wiki/MIT_License">MIT License</a> and the 922 <a target="_blank" href="http://creativecommons.org/licenses/GPL/2.0/">GPL License</a>. 923 </td> 924 <td width="100"><a target="_blank" href="http://creativecommons.org/licenses/GPL/2.0/"><img alt="Creative Commons License" style="border-width:0" src="http://creativecommons.org/images/public/somerights20.png"/></a></td> 925 </tr> 926 <tr> 927 <td colspan="2"> 928 <pre class="copyright">Copyright © 2008 <a href="http://www.fyneworks.com/">Fyneworks.com</a> 929 930 Permission is hereby granted, free of charge, to any person 931 obtaining a copy of this software and associated documentation 932 files (the "Software"), to deal in the Software without 933 restriction, including without limitation the rights to use, 934 copy, modify, merge, publish, distribute, sublicense, and/or sell 935 copies of the Software, and to permit persons to whom the 936 Software is furnished to do so, subject to the following 937 conditions: 938 939 The above copyright notice and this permission notice shall be 940 included in all copies or substantial portions of the Software. 941 942 THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, 943 EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES 944 OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND 945 NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT 946 HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, 947 WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING 948 FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR 949 OTHER DEALINGS IN THE SOFTWARE.</pre> 950 </td> 951 </tr> 952 </table> 953 </div><!--// License Info //--> 954 </div><!--// tab-License //--> 955 <div id="tab-More"> 956 <table width="100%" cellspacing="20"> 957 <tr> 958 <td valign="top" width="50%"> 959 <h2><a href="/jquery/multiple-file-upload/"><strong>Multiple File Upload Plugin</strong></a></h2> 960 <p> 961 <!--//<strong style="color:green;">UPDATED!</strong>//--> 962 Provides a non-obstrusive way of selecting multiple files for upload. 963 Supports <a href="http://bassistance.de/jquery-plugins/jquery-plugin-validation/">validation</a> and <a href="http://malsup.com/jquery/form/">form</a> plugins. 964 </p> 965 966 <h2><a href="/jquery/star-rating/"><strong>Star-Rating Plugin</strong></a></h2> 967 <p> 968 <!--//<strong style="color:green;">UPDATED!</strong>//--> 969 Creates a non-obstrusive star-rating control from any set of radio boxes. 970 Features include half/partial stars and an API for programmatic control. 971 Supports the <a href="http://bassistance.de/jquery-plugins/jquery-plugin-validation/">validation plugin</a>. 972 </p> 973 974 <h2><a href="/jquery/xml-to-json/"><strong>XML to JSON</strong></a></h2> 975 <p> 976 <!--//<strong style="color:green;">UPDATED!</strong>//--> 977 Convert XML to JSON and read data from XML files/RSS feeds with ease. 978 </p> 979 980 </td> 981 <td valign="top" width="50%"> 982 983 <h2><a href="/jquery/CKEditor/"><strong>CKEditor Plugin</strong></a></h2> 984 <p> 985 jQuery plugin for non-obstrusive integration of textareas with <strong>CKEditor</strong>. 986 </p> 987 988 <h2><a href="/jquery/FCKEditor/"><strong>FCKEditor Plugin</strong></a></h2> 989 <p> 990 jQuery plugin for non-obstrusive integration of textareas with <strong>FCKEditor</strong>. 991 <br/> 992 <strong style="color:#f00;">OLD!</strong> It is recommended you upgrade to CKEditor (above). 993 </p> 994 995 <h2><a href="/jquery/Codepress/"><strong>Codepress Plugin</strong></a></h2> 996 <p> 997 jQuery plugin for non-obstrusive integration of textareas with <strong>Codepress</strong>. 998 </p> 999 </td> 1000 </tr> 1001 </table> 1002 </div><!--// tab-More//--> 1003 </div><!--// tabs //--> 1004 </div> 1005 </div> 1006 <div id="push"></div> 1007 </div> 1008 <div id="foot"> 1009 <table width="100%" cellspacing="10"> 1010 <tr> 1011 <td valign="middle" width="400" align="left"> 1012 <a href="http://www.fyneworks.com/jquery/multiple-file-upload/">Multiple File Upload</a>, 1013 <a href="http://www.fyneworks.com/jquery/star-rating/">Star Rating</a>, 1014 <a href="http://www.fyneworks.com/jquery/CKEditor/">CKEditor</a> 1015 <a href="http://www.fyneworks.com/jquery/xml-to-json/">XML to JSON</a> 1016 </td> 1017 <td valign="top" align="center"> 1018 [<a href="#">back to top</a>] 1019 </td> 1020 <td valign="middle" width="400" align="right" colspan="2"> 1021 <span class='st_sharethis_hcount' displayText='ShareThis'></span> 1022 <span class='st_twitter_hcount' displayText='Tweet'></span> 1023 <span class='st_facebook_hcount' displayText='Facebook'></span> 1024 <!--//<span class='st_stumbleupon_hcount' displayText='StumbleUpon'></span>//--> 1025 <span class='st_plusone_hcount' displayText='Google +1'></span> 1026 <!--//<span class='st_digg_hcount' displayText='Digg'></span>//--> 1027 <!--//<span class='st_reddit_hcount' displayText='Reddit'></span>//--> 1028 <script type="text/javascript">var switchTo5x=true;</script> 1029 <script type="text/javascript" src="http://w.sharethis.com/button/buttons.js"></script> 1030 <script type="text/javascript">stLight.options({publisher: "08df54c5-b85f-4b2d-aac7-16cb76975bb3"}); </script> 1031 </td> 1032 </tr> 1033 <tr> 1034 <td valign="top" width="400"> 1035 <strong>jQuery Plugins</strong> 1036 by <a href="http://www.fyneworks.com/">Fyneworks.com</a> 1037 <br/> 1038 Licensed under the 1039 <a target="_blank" href="http://en.wikipedia.org/wiki/MIT_License">MIT License</a> and the 1040 <a target="_blank" href="http://creativecommons.org/licenses/GPL/2.0/">GPL License</a>. 1041 </td> 1042 <td valign="top" align="center"> 1043 1044 </td> 1045 <td valign="top" width="280" align="right"> 1046 <span style="color:#090;"> 1047 Tested with jQuery 1.7 on:<br/>IE6, IE7, IE8, FF, Chrome, Opera and Safari 1048 </span> 1049 </td> 1050 <td valign="top" width="120" align="right"> 1051 <a target="_blank" href="http://jquery.com/"><img width="110" height="31" src="documentation/jq.png" alt="Powered by jQuery" style="vertical-align:middle;"/></a> 1052 </td> 1053 </tr> 1054 </table> 1055 </div> 1056 <script type="text/javascript"> 1057 var _gaq = _gaq || []; 1058 _gaq.push(['_setAccount', 'UA-1942730-1']); 1059 _gaq.push(['_setDomainName', 'fyneworks.com']); 1060 _gaq.push(['_trackPageview']); 1061 (function() { 1062 var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; 1063 ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; 1064 var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); 1065 })(); 1066 </script> 1067 </body> 1068 </html>
title
Description
Body
title
Description
Body
title
Description
Body
title
Body
| Generated: Fri Nov 28 20:08:37 2014 | Cross-referenced by PHPXref 0.7.1 |