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 35 function onUploadSubmit() { 36 document.getElementById('upload_target').contentWindow.document.body. 37 innerHTML = ''; 38 var label = document.getElementById('upload_label'); 39 label.innerHTML = 'Uploading "' + document.forms[0].upload.value + '"'; 40 label.style.display = ''; 41 intervalId = window.setInterval(onTick, 500); 42 return true; 43 } 44 45 function onUploadDone() { 46 var label = document.getElementById('upload_label'); 47 label.style.display = 'none'; 48 window.clearInterval(intervalId); 49 return true; 50 } 51 </script> 52 </head> 53 <body> 54 <form action="/common/upload" method="post" name="upload_form" 55 target="upload_target" enctype="multipart/form-data" 56 onsubmit="onUploadSubmit();"> 57 <div> 58 <div class="fileUpload"> 59 <span>Upload</span> 60 <input id="upload" name="upload" type="file" class="upload" /> 61 </div> 62 <div><input id="go" type="submit" value="Go!"/></div> 63 </div> 64 <div id="upload_label" style="display:none"></div> 65 <iframe src="" id="upload_target" name="upload_target" 66 style="width:300px;height:200px"> 67 </iframe> 68 </form> 69 </body> 70 </html>