PHP Programming Tutorial - PHP Javascript Image Uploading Tutorial

In this tutorial we will be using PHP to upload an image and display the results using Javascript all without leaving the current page. We will be using the "target" attribute of the form element to submit our form to an iFrame which will perform the uploading of the image.

[d.o.balogun]

So straight forward.
Thank you so much.

[arslanaslam]

Only this video helped me in uploading file using javascript. Good work Bro.
Thank you

[dompolblanka]

Tim thank you very much for posting this. It's incredibly easy to follow and wonderfully presented. I'm going to be using a variation of this as a fallback for those browsers that aren't capable of using the HTML5 File API (IE8-IE9 primarily). You're a credit to the community.

[munoz]

Thanks for tutorial, I needed a upload script I will be using it.

[macmusic]

Works great !! thanks for the tutorial !!

[luisadrianmadlangbayan]

THANKS SIR works on me but one thing how can i save this image or how to save in a target folder or path this photo that i saved?

[timkipptutorials]

You could do something along the lines of checking how many files are in the directory you are currently uploading to and then base your new image name off of that.

[tessiedeiza]

Hi, nice work. I have an error Uncaught TypeError: Cannot read property 'setAttribute' of null, how can i go about this?

[joshfisher]

This is great! Thanks so much. One question.

What if I want to remame the image as it is uploaded to my directory? If user a uploads an image I would like for it to be called image1, or whatever. Five minutes later if user B uploads an image I would like for it to be called image2. Then, if user A uploads another image I want it to be called image3. I would like to allow users to upload as many images as they want and name them appropriately.

Thanks again.

[frager]

hey sir very good tut but what if i want the photo display in another page?thanks

[albertsaludaga]

can u please tell me how to upload it to the database? im trying to use this to update pictures.

[officerdoofy]

Is there anyway of making this so that the person has to log in? also to make it the person can upload multiple images

[teampoundgorilla]

this can overwrite the previous picture with same name?

[tbForty]

i cannot get it to display the image back to the index.php file.  I've followed the code exactly, but it seems to be failing on the javascript responses back to the index.php page.  I've double checked all my code and can't see any problems.  Any suggestions?

[videomasters]

when i try to upload an image, it keeps telling me that the file size is too big, but the file size is smaller than the one you used in the video.

[gouravdutta]

After I choose the picture and then when I proceed to upload it, the picture doesn't display instead my entire php code is displayed....Please cite me where can I possibly be wrong..

[timkipptutorials]

@Timmy Mcfistfull who are you talking to? I hope it's not me since I'm running a local server, not on am Apple computer, and my code does work. So please clarify for me...

[nabajyotiborgohain]

How to make this in simple html use css

[jonaskjr]

check your php.ini file look for file sixe and change the number to larger file size

[williama-d]

how did you come up with the code do you need a live server to test it