index.html 2.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354
  1. <!doctype html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>VLC for iOS file uploader</title>
  6. <link rel="stylesheet" href="style.css">
  7. <script type="text/javascript" src="jquery-1.10.1.min.js"></script>
  8. <script type="text/javascript" src="jquery.ui.widget.js"></script>
  9. <script type="text/javascript" src="jquery.iframe-transport.js"></script>
  10. <script type="text/javascript" src="jquery.fileupload.js"></script>
  11. <script>
  12. $(function(){
  13. $('#fileupload').fileupload({
  14. dataType: 'json',
  15. done: function (e, data) {
  16. $('#progress').hide();
  17. $.each(data.files, function (index, file) {
  18. $('<li/>').text(file.name).appendTo($('#uploads ul'));
  19. });
  20. $('#uploads').show();
  21. },
  22. progressall: function (e, data) {
  23. $('#progress').show();
  24. var progress = parseInt(data.loaded / data.total * 100, 10);
  25. $('#progress .bar').css('width', progress + '%');
  26. }
  27. });
  28. });
  29. </script>
  30. </head>
  31. <body>
  32. <div class="container">
  33. <header>
  34. <div id="appIcon"></div>
  35. <h1>VLC for iOS</h1>
  36. </header>
  37. <div id="progress" style="display: none;">
  38. <div class="bar" style="width: 50%;"></div>
  39. </div>
  40. <form>
  41. <input id="fileupload" type="file" name="files[]" data-url="upload.json" multiple>
  42. </form>
  43. <div id="uploads" style="display: none;">
  44. <p>So far you have uploaded:</p>
  45. <ul>
  46. </ul>
  47. </div>
  48. <footer>
  49. <p>VLC for iOS is free, open-source software published by <a href="http://www.videolan.org" target="_blank">VideoLAN</a>. <br />Modification and redistribution is subject to $LICENSE and further rights reserved by the VideoLAN association.<br />You can find the sources to this application <a href="http://git.videolan.org/?p=vlc-ports/ios2.git;a=summary" target="_blank">online</a> and more information about licensing in the About dialog included within the app.</p>
  50. </footer>
  51. </div>
  52. </body>
  53. </html>