transparentUpload.html 1.8 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>Upload Form</title>
  5. <style>
  6. .fileUpload {
  7. position: relative;
  8. overflow: hidden;
  9. margin: 10px;
  10. background-color: #FFFFFF;
  11. width: 50px;
  12. text-align: center;
  13. }
  14. .fileUpload input.upload {
  15. position: absolute;
  16. top: 0;
  17. right: 0;
  18. margin: 0;
  19. padding: 0;
  20. font-size: 20px;
  21. cursor: pointer;
  22. opacity: 0;
  23. filter: alpha(opacity=0);
  24. height: 100%;
  25. text-align: center;
  26. }
  27. </style>
  28. <script>
  29. var intervalId;
  30. function onTick() {
  31. var label = document.getElementById('upload_label');
  32. label.innerHTML += '.';
  33. }
  34. function onUploadSubmit() {
  35. document.getElementById('upload_target').contentWindow.document.body.
  36. innerHTML = '';
  37. var label = document.getElementById('upload_label');
  38. label.innerHTML = 'Uploading "' + document.forms[0].upload.value + '"';
  39. label.style.display = '';
  40. intervalId = window.setInterval(onTick, 500);
  41. return true;
  42. }
  43. function onUploadDone() {
  44. var label = document.getElementById('upload_label');
  45. label.style.display = 'none';
  46. window.clearInterval(intervalId);
  47. return true;
  48. }
  49. </script>
  50. </head>
  51. <body>
  52. <form action="/common/upload" method="post" name="upload_form"
  53. target="upload_target" enctype="multipart/form-data"
  54. onsubmit="onUploadSubmit();">
  55. <div>
  56. <div class="fileUpload">
  57. <span>Upload</span>
  58. <input id="upload" name="upload" type="file" class="upload" />
  59. </div>
  60. <div><input id="go" type="submit" value="Go!"/></div>
  61. </div>
  62. <div id="upload_label" style="display:none"></div>
  63. <iframe src="" id="upload_target" name="upload_target"
  64. style="width:300px;height:200px">
  65. </iframe>
  66. </form>
  67. </body>
  68. </html>