[D Double E]

I have looked online and everyone does it differently. Whats the simplest way to submit a form that only has one input (file) to a external php script then echo out the response in a span with a id of "response"

P.S
Is submitting a image different then submitting a text field in jquery/ajax?

[tinkerman2000]

I have looked online and everyone does it differently. Whats the simplest way to submit a form that only has one input (file) to a external php script then echo out the response in a span with a id of "response"

P.S
Is submitting a image different then submitting a text field in jquery/ajax?

No, a image isn't that different then any other input just the data that is sent is different.

It depends on you plan on doing this? is it a static form or dynamic?

you want to do this via ajax? if you do then you can't send images via ajax if you plan for dynamic workflow or upload more then 1 image at a time.

You will need to use a iframe and embed a php file to it. then direct the form post to that iframe using the target attribute. There're many ways to do this.

Do explain if you want to submit an image via ajax? and if you want to do it dynamically. Meaning when you submit the form it dosen't redirect you to that website where you posted the data too. Instead you want like a div to fade in and say you succeeded on submitting a image. Then fade out.

If you want that effect you have to use an iframe to have that php file on that iframe. then use the target attribute. Use that method and it should work. It's not actually using ajax but gives you that ajax effect. You then submit the values to that php file.

It's a little bypass trick.

[D Double E]

Basically, Im trying to make a image upload preview. User browse's there computer and selects a image -> jQuery notice's the change on the form -> sends through to ajax -> returns a thumbnail that will be shown.

[tinkerman2000]

Basically, Im trying to make a image upload preview. User browse's there computer and selects a image -> jQuery notice's the change on the form -> sends through to ajax -> returns a thumbnail that will be shown.

I won't code anything. I will tell you the concept.

You first will need select then input and run the .onchange or do it the html way where onchange and have it run a function.

that function will submit a form aka the image form. Put the form to post to the right url to the php file. Then put target="#sumitform" whatever you id or named your iframe (i-frame). You just then submit the form. Even if it's not fully full.

Have the php file have if statements that way you can run the same php file but would do 2 different things. One will make a preview of the image aka a thumbnail and then return that image back. However, you still need to store that image on your server. Then output the preview image.

Which is in the php file write javascript that will insert these images into a div that is already on the page beforehand.

You still have to have the image stored on the server. If you want to make it a preview that if they don't hit a save button. Then have your code or image stored in a database have it have an active colum and set it to 0. Then after maybe an hour. You can time delay a function or code. Which will just look that image up in the database and after 1 hour after upload check to see if it has a 1 in the active area. If not then you do the process of deleting the image.

If you want to make it so that when they kit a submit button. That the Images uploaded. You want to send the back and display that this is what you uploaded and maybe give an option to delete it.

---

Basically, Im trying to make a image upload preview. User browse's there computer and selects a image -> jQuery notice's the change on the form -> sends through to ajax -> returns a thumbnail that will be shown.

with ajax you can't upload images. It only uploads data aka numbers strings well sends it to the php file.

So the work around here is using iframes and have a form post to this iframe. the target will basically say that when we submit this form. We will send the request to this empty iframe that isn't visible. However, before we send the post we will quickly load in a php file and have it waiting for our post data. Then send that data and run the code.

you then run the javascript code on that php file that will then send data back.

however, you need to use window.body.etc..etc.. you can't just do $("#form). you have to use javascript code to get back to window and then strike down to the right div or element where you want to inject the images into.