Question

Is it possible to reload a form after file-input change?

I have a form where the user can chose an image for upload. I also have a php script which displays that image resized. I only wonder if it is possible to reload a form OnChange of the file-input and then call the php code which uploads the picture, so that the user can preview it? Does the php file have to be the same file as in the ? or can I call another php file for the image upload only, with javascript?

NOTE: The user will be able to upload multiple pictures...

Please guide me in the right direction with as much input you can...

UPDATE: No ajax... can this be done without it? No problem for me if the page reloads, but with the image this time... can it be done?

Thanks

Answer 1

You have two issues here.

1) Multiple uploads, so the preview will need to be in a table for each upload. The user will click submit or send and the browser will send it to the server. To do this behind the scenes you will need to find a php script that will help you do this asynchronously. One I found useful was: http://www.anyexample.com/programming/php/php_ajax_example__asynchronous_file_upload.xml

2) In the iframe response you can then pass back the urls for the thumbnails. This could be the id of each file. The best bet is to create an image tag that calls a php script, which will return the image directly, as a thumbnail.

<img src="/imageview.php?id=3&mode=thumbnail" />

This way you don t have to save the thumbnails, but the user will be able to see it immediately, as you update the src property with the new url.

Answer 2

It is possible of course, as with all programming, in most cases if you can think it it is possible.

From what I see you are looking at a form that will update the result of an upload via AJAX. You will need to look at javascript frameworks like jQuery to accomplish this, and you will basically upload the image/resize it, and display it to the user all without a page reload.

Data in the form will be updated with an ajax call coming back from your PHP image resizer

EDIT Examples of ajax image uploads that may help:

Answer 3

When you submit the form, the entire page reloads. The only way around this is to put the upload form in an iframe. You cannot upload an image without submitting the form, and you cannot upload a thumbnail of the image, you have to upload the entire image, unless you use flash, silverlight or java.

Answer 4

<input type="file" name="…" onchange="this.form.submit();">

You will need to be smart about tracking which images have been loaded with a given form session and storing a reference to them in hidden inputs.

友情链接