Is it possible to upload image to server without submitting the form?

Question

I have a file field in my form.

I want the user to be able to choose an image, press OK, and then without submitting the form, preview the image in a smaller resized way. If everything is to the satisfactory of the user, then hit submit and the image as well as the form is submitted...

How would you good professionals do this basically?

Thanks

Answer 1

You need to submit at least a form to upload the file and display it. You can simulate an Ajax upload by using an iframe.

Answer 2

You might want to have a look to the following:

http://www.atwebresults.com/php%5Fajax%5Fimage%5Fupload/

Answer 3

I think the best method would be:

1. The user presses the OK button, an AJAX request is made in the background to submit the form which would upload the image in a temporary location, without the user knowing. The request would return to you the temporary files location.
2. Then you can display the resized image to the user and if they are satisfied they can choose to submit the form and upload the original image.

Here's an article which also might help you out

Answer 4

When you've uploaded the image once, there's no point uploading it a second time, you may as well keep the copy already on the server, so long as you have some way to tie it back to the form once that's submitted, or removing it if the form is never submitted.

Cleaning up uploaded images is a problem you will have to solve anyway. Once you've uploaded the image, the server will have to keep it around, as the browser will have to request the image in a second request to be able to display it.

I would do this then:

• Have a separate form for the image(s), make sure it includes some id field so that you can tie them all together.
• Have the image(s) form automatically submit using AJAX as part of an onchange event on the file field.
• When the AJAX call succeeds, add an img element to your page to display the uploaded image.
• Submit the rest of the form separately.

Cleaning up uploaded images that you don't want (say the user adds a couple of pictures, and then closes the browser without submitting the main form), is a separate issue, and how you deal with it will depend on what sort of application you are developing.

Answer 5

According to my understanding, you need a Java or Flash based solution. A Java applet or a Flash component will allow you to preview the image before uploading and these can also send the file asynchronously... i.e. without submitting the form or refreshing the page.

Answer 6

You can use the tag for this.

Basically, you put your upload field to an iframe. When a user uploads an image, the iframe gets reloaded, but not the whole page, at the mean time on the server side you peform resizing.