CODEWITHSUNDEEP
phpajaximageupload
samoyed
samoyed

Reputation: 879

php image upload using ajax and display image after upload

I have the following scenario:

  1. user selects an image to upload (simple form with input field where type="file")
  2. File is upload to server (also Db is updated)
    all this i already have..

I need to display the uploaded image on the page, upon success , without refresh.

Can this be done without iframes?
I have already done some ajax coding where input is saved to db or is used to return content from db.

The thing here is sending the actual file data from the field. Can I do this using jquery's $.get?

I was thinking that after copying the file and storing relevant data in the db i could return the new location (the path in the server where the file was copied). The jquery code catching this return could use it to set the src atribute of an img tag to the new file' thus displaying it.

Can you please recommend relevant tutorials or demos?
also, any tips would be very appreciated

Upvotes: 2

Views: 5781

Answers (3)

Supun Kavinda
Supun Kavinda

Reputation: 1483

You can achieve this using AJAX with PHP and MYSQL. You can upload the image with AJAX and FormData, then validate and save the image in the server and send the URL of the image in a JSON response.

Note that the most important part of this is the validation.

See this beginner's guide to learn more.

Upvotes: 0

Bryan Gentry
Bryan Gentry

Reputation: 873

The best way to do this is to use a javascript-based AJAX upload function, and there are several javascript/jQuery plugins that do this. Check out this tutorial which explains one way of doing this using the ajaxupload.js plugin, for which you can find more documentation here.

I also wrote my own tutorial on this topic, including some PHP code that you need to save the image and other changes that I think are useful for beginners. You can find that here.

Upvotes: 1

samach
samach

Reputation: 3394

u need javascript for that. Provide an onClick function with ur input type file element and in that function using javascripts createElement(), setAttribute(), appendChild etc functions to append the new image to the document object. hope it helps

Upvotes: 2

Related Questions