For solve this problem, Please see the following step.
- Add ajax-upload to your detail view.
- iframe-based uploader like Resource#1.
- Silverlight-based & Flash-based uploader. I like this technique because it doesn’t require any server-side script for display current upload status. But in HTML5, you can create this without using any web browser plug-in.
- Commercial uploader like Resource#2. that use hidden iframe for uploading.
Upload file to temporary location.
- System response the temporary location. Next, client keep temporary location in hidden input in detail form.
- Keep temporary location with session_id. You can store it in database or Session variable depend on your framework.
When you click on the save button, the system will move the files to their real location
Note. System will automatically delete the expired file from the temporary location.
After almost one year, I just found a great 3rd-parties control for this question. This is an open source plug-in of jQuery. It name Plupload that allows you to upload files using HTML5, Silverlight, Flash or normal forms and it provide some unique features such as upload progress, image resizing and chunked uploads.