index.php 3.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112
  1. <!DOCTYPE html>
  2. <html>
  3. <link rel="stylesheet" href="../script/tocas.min.css">
  4. <head>
  5. <meta charset="UTF-8">
  6. <title>ArOZ Upload</title>
  7. <script src="../script/jquery.min.js"></script>
  8. </head>
  9. <body>
  10. <div class="ts container">
  11. <br>
  12. <h1>IMUS Laboratory</h1><br>
  13. <h2>ArOZ System Upload Interface</h2>
  14. <div class="ts pointing secondary big menu">
  15. <a class="item" href="../index.php">Index</a>
  16. <a class="item" href="../music.php">Music</a>
  17. <a class="item" href="../video.php">Video</a>
  18. <a class="item" href="../photo.php">Photo</a>
  19. <a class="active item" href="../upload/">Upload</a>
  20. <a class="item" href="uploads/">Upload Dir</a>
  21. </div>
  22. <h3>Upload</h3>
  23. <form class="ts form" action="arozupload.php" method="POST" enctype="multipart/form-data">
  24. <div class="ts jumbotron">
  25. <h4 class="ts header"> Step 1 </h4>
  26. <div class="sub header">Select file(s) to upload. </div><br>
  27. <div class="form-group">
  28. <div class="input-group">
  29. <span class="ts primary basic button btn-file">
  30. Browse
  31. <input type="file" id="files" name="fileToUpload[]" id="fileToUpload" multiple>
  32. </span>
  33. </div>
  34. </div>
  35. </div>
  36. <div class="ts jumbotron">
  37. <h4 class="ts header"> Step 2 </h4>
  38. <div class="sub header">Setup Directory Name(optional): </div>
  39. <div class="field">
  40. <select class="ts fluid basic dropdown" id="dirname" type="text" name='dirname'>
  41. <option value=''>Files Directory</option>
  42. <option value='music'>Music Bank</option>
  43. <option value='video'>Video Bank</option>
  44. <option value='photo'>Photo Station</option>
  45. </select>
  46. </div>
  47. <div class="sub header">Select Multiple Files with MOUSEDRAG, CTRL, SHIFT </div>
  48. </div>
  49. <input class="ts positive basic button" type="submit" value="Upload" name="submit">
  50. <a class="ts negative basic button" href=".."> Cancel </a>
  51. </form>
  52. <div class="ts section divider"></div>
  53. <p align="right"><img class="ts small image" src="../logo.png"></p>
  54. </div>
  55. </div>
  56. </body>
  57. <style type="text/css">
  58. .btn-file {
  59. position: relative;
  60. overflow: hidden;
  61. }
  62. .btn-file input[type=file] {
  63. position: absolute;
  64. top: 0;
  65. right: 0;
  66. min-width: 100%;
  67. min-height: 100%;
  68. font-size: 100px;
  69. text-align: right;
  70. filter: alpha(opacity=0);
  71. opacity: 0;
  72. background: red;
  73. cursor: inherit;
  74. display: block;
  75. }
  76. input[readonly] {
  77. background-color: white !important;
  78. cursor: text !important;
  79. }
  80. </style>
  81. <script type="text/javascript">
  82. $(document).on('change', '.btn-file :file', function() {
  83. var input = $(this),
  84. numFiles = input.get(0).files ? input.get(0).files.length : 1,
  85. label = input.val().replace(/\\/g, '/').replace(/.*\//, '');
  86. input.trigger('fileselect', [numFiles, label]);
  87. });
  88. $(document).ready( function() {
  89. $('.btn-file :file').on('fileselect', function(event, numFiles, label) {
  90. var input = $(this).parents('.input-group').find(':text'),
  91. log = numFiles > 1 ? numFiles + ' files selected' : label;
  92. if( input.length ) {
  93. input.val(log);
  94. } else {
  95. //if( log ) alert(log);
  96. }
  97. });
  98. });
  99. </script>
  100. </html>