12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970 |
- <!DOCTYPE html>
- <html>
- <head>
- <title>Upload Form</title>
- <style>
- .fileUpload {
- position: relative;
- overflow: hidden;
- margin: 10px;
- background-color: #FFFFFF;
- width: 50px;
- text-align: center;
- }
- .fileUpload input.upload {
- position: absolute;
- top: 0;
- right: 0;
- margin: 0;
- padding: 0;
- font-size: 20px;
- cursor: pointer;
- opacity: 0;
- filter: alpha(opacity=0);
- height: 100%;
- text-align: center;
- }
- </style>
- <script>
- var intervalId;
- function onTick() {
- var label = document.getElementById('upload_label');
- label.innerHTML += '.';
- }
- function onUploadSubmit() {
- document.getElementById('upload_target').contentWindow.document.body.
- innerHTML = '';
- var label = document.getElementById('upload_label');
- label.innerHTML = 'Uploading "' + document.forms[0].upload.value + '"';
- label.style.display = '';
- intervalId = window.setInterval(onTick, 500);
- return true;
- }
- function onUploadDone() {
- var label = document.getElementById('upload_label');
- label.style.display = 'none';
- window.clearInterval(intervalId);
- return true;
- }
- </script>
- </head>
- <body>
- <form action="/common/upload" method="post" name="upload_form"
- target="upload_target" enctype="multipart/form-data"
- onsubmit="onUploadSubmit();">
- <div>
- <div class="fileUpload">
- <span>Upload</span>
- <input id="upload" name="upload" type="file" class="upload" />
- </div>
- <div><input id="go" type="submit" value="Go!"/></div>
- </div>
- <div id="upload_label" style="display:none"></div>
- <iframe src="" id="upload_target" name="upload_target"
- style="width:300px;height:200px">
- </iframe>
- </form>
- </body>
- </html>
|