Check out SWFUpload, which is essentially a javascript api to flash's absolutely superior file upload handling capabilities. Best thing out there until the browsers finally catch up.
From link:
- Upload multiple files at once by ctrl/shift-selecting in dialog
- Javascript callbacks on all events
- Get file information before upload starts
- Style upload elements with XHTML and css
- Display information while files are uploading using HTML
- No page reloads necessary
- Works on all platforms/browsers that has Flash support.
- Degrades gracefully to normal HTML upload form if Flash or
javascript is unavailable
- Control filesize before upload starts
- Only display chosen filetypes in dialog
- Queue uploads, remove/add files before starting upload
Demos
----- iframe upload -----
To start, you want to have an iframe on your page. This is meant for server communication. You'll hide it later, but for now, keep it visible. Give that iframe a name attribute, like "uploader" or something.
Now, in your form, set the target to the iframe's name and the action to a script you have on the server that will accept a file upload (like a normal form with a file upload). Add a link inside that form with the text "Add File". Set that link to run a javascript function which will add a new input to the form. This can be done via the DOM, but I would recommend a javascript library like jquery.
Once the new file input is added to the form, set the blur event of that input to a javascript function that will submit the form and then check it periodically for output. Reading an iframe can be tricky, but it's possible.
Have your file upload script output a "Done." or a filename or something when the upload is complete.
Check it every second or so until there is content. Once you have content, kill your timer and replace the file input with the name of the file (or "File Uploaded") or whatever.
Hide your iframe with css.
与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…