index.html 1.5 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556
  1. <!doctype html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="utf-8">
  5. <title>ArduRemoteID</title>
  6. <meta name="description" content="ArduPilot RemoteID Module.">
  7. <link rel="stylesheet" type="text/css" href="styles/main.css">
  8. <script src='js/jquery.min.js'></script>
  9. </head>
  10. <body>
  11. <h1>ArduRemoteID</h1>
  12. <h2>Status</h2>
  13. <h2>Firmware Update</h2>
  14. <form method='POST' action='#' enctype='multipart/form-data' id='upload_form'>
  15. <input type='file' name='update'>
  16. <input type='submit' value='Update'>
  17. </form>
  18. <div id='progress'>upload progress: 0%</div>
  19. <script>
  20. $('form').submit(function(e) {
  21. e.preventDefault();
  22. var form = $('#upload_form')[0];
  23. var data = new FormData(form);
  24. $.ajax({
  25. url: '/update',
  26. type: 'POST',
  27. data: data,
  28. contentType: false,
  29. processData:false,
  30. xhr: function() {
  31. var xhr = new window.XMLHttpRequest();
  32. xhr.upload.addEventListener('progress', function(evt) {
  33. if (evt.lengthComputable) {
  34. var per = evt.loaded / evt.total;
  35. $('#progress').html('progress: ' + Math.round(per*100) + '%');
  36. }
  37. }, false);
  38. return xhr;
  39. },
  40. success:function(d, s) {
  41. console.log('success!')
  42. },
  43. error: function (a, b, c) {
  44. }
  45. });
  46. });
  47. </script>
  48. </body>
  49. </html>