PageRenderTime 170ms CodeModel.GetById 50ms RepoModel.GetById 1ms app.codeStats 0ms

/ext-4.1.0_b3/docs/extjs/examples/form/file-upload.html

https://bitbucket.org/srogerf/javascript
HTML | 70 lines | 56 code | 10 blank | 4 comment | 0 complexity | 9e45b5bc1f59c4c2966c9f8d13e806cf MD5 | raw file
    

  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    2. 

  2. <html>
    3. 

  3. <head>
    4. 

  4. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    5. 

  5.     <title>File Uploads</title>
    6. 

  6. 

  7.     <!-- ExtJS -->
    8. 

  8.     <link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
    9. 

  9.     <script type="text/javascript" src="../../ext-all.js"></script>
    10. 

  10. 

  11.     <!-- Shared -->
    12. 

  12.     <link rel="stylesheet" type="text/css" href="../shared/example.css" />
    13. 

  13. 

  14.     <!-- GC -->
    15. 

  15. 

  16. 

  17.     <!-- Example -->
    18. 

  18.     <script type="text/javascript" src="file-upload.js"></script>
    19. 

  19.     <style type="text/css">
    20. 

  20.         .upload-icon {
    21. 

  21.             background: url('../shared/icons/fam/image_add.png') no-repeat 0 0 !important;
    22. 

  22.         }
    23. 

  23.         #fi-button-msg {
    24. 

  24.             border: 2px solid #ccc;
    25. 

  25.             padding: 5px 10px;
    26. 

  26.             background: #eee;
    27. 

  27.             margin: 5px;
    28. 

  28.             float: left;
    29. 

  29.         }
    30. 

  30.         .x-debug .x-form-file-wrap .x-form-file-input {
    31. 

  31.             filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0.6);
    32. 

  32.             opacity: 0.6;
    33. 

  33.             background-color: gray;
    34. 

  34.         }
    35. 

  35.     </style>
    36. 

  36. 

  37. </head>
    38. 

  38. <body>
    39. 

  39.     <h1>File Upload Field</h1>
    40. 

  40. 

  41.     <p>This example demonstrates use of Ext.form.field.File, a file upload field with custom rendering.</p>
    42. 

  42.     <p>The js is not minified so it is readable. See <a href="file-upload.js">file-upload.js</a>.</p>
    43. 

  43. 

  44.     <h2>Basic File Field</h2>
    45. 

  45.     <p>
    46. 

  46.         A typical file upload field with Ext style. Direct editing of the text field cannot be done in a
    47. 

  47.         consistent, cross-browser way, so it is always read-only. The file path reported by the <code>getValue</code>
    48. 

  48.         method will
    49. 

  49.     </p>
    50. 

  50.     <div id="fi-basic"></div>
    51. 

  51.     <div id="fi-basic-btn"></div>
    52. 

  52. 

  53.     <h2>Button Only</h2>
    54. 

  54.     <p>
    55. 

  55.         You can also render the file input as a button without the text field, with access to the field's value via the
    56. 

  56.         standard <tt>Ext.form.field.Field</tt> interface or by handling the <tt>fileselected</tt> event (as in this example).
    57. 

  57.     </p>
    58. 

  58.     <div id="fi-button"></div>
    59. 

  59.     <div id="fi-button-msg" style="display:none;"></div>
    60. 

  60.     <div class="x-clear"></div>
    61. 

  61. 

  62.     <h2>Form Example</h2>
    63. 

  63.     <p>
    64. 

  64.         The File field can also be used in form layouts just like any other field, with support for labeling,
    65. 

  65.         validation (the field is required in this example), empty text, etc.  This example also demonstrates
    66. 

  66.         using the <tt>buttonConfig</tt> option to provide a customized icon upload button.
    67. 

  67.     </p>
    68. 

  68.     <div id="fi-form"></div>
    69. 

  69. </body>
    70. 

  70. </html>
    71. 

  71.