How to Upload an image, using javascript and php inside the window.onload function

Question

Ok, I'm new to Javascript (and web development in general) and I'd like to do the following:

Upload an image and save it to a directory (images)
somehow get the image path in the server to a variable inside the onload function.

I know this is rather specific, but I'd really appreciate any input. let me know if I need to be more specific.

What image(s) are you uploading? If it is an image on the client's machine, as far as I know, Javascript/jQuery will not allow this to be down without user intervention. — Erik Philips
– Erik Philips, Commented Oct 23, 2012 at 23:49
ok, I figured I might need to use a little bit of php, but I'm not sure on how to that either. sorry for the vague info, really new to this, but I want to learn — user1745713
– user1745713, Commented Oct 24, 2012 at 0:29

TheBrent · Accepted Answer · 2012-10-24 00:18:49Z

1

What I think your trying to say is,

How do I upload an image to a file on my server, then send that path to the browser when I need to display the image?

If so,

<form method="post" enctype="multipart/form-data" action="path/to/php/script">
    <input type="file" name="myImage" />Upload Photo:
    <input type="submit" value="Submit">
</form>

You can use JavaScript to submit the form or the submit input.

Next you'll have a php script on your server that stores the image in a file and saves the image path to a database or flat file. When you want to send this image back to the client, you'll have to use PHP (or another more prestigious language). I would send a JSON object to your client, so that you can work in JavaScript properly. But, if you want to do it in php you can always try this,

window.onload(<?php echo imageVariable; ?>);

Some would consider that bad practice I guess.

Let me know if I can help any further.

answered Oct 24, 2012 at 0:18

TheBrent

2,8633 gold badges18 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

user1745713 Over a year ago

Thanks! what I want to do is slightly different. I want to allow the user to upload and image, and then use the path where the image gets stored to load the image to an HTML5 canvas. something along the lines: input.onsubmit() = function(){ var path = //upload the file here and return the path canvas.add(path); } The add method is provided by a library I'm using and I need the path to be able to add to the canvas.

TheBrent Over a year ago

Ajax sounds like a good candidate for this. Send the image to your server via ajax, use php on the server side to store it. Then, send the path of the image back from the server. With the AJAX callback you could probably set something up to load the image into an html5 canvas.

user1745713 Over a year ago

Thanks Brent, I'll have to figure out how to use AJAX. I'll let you know if I get somewhere

TheBrent Over a year ago

No problem, check out the jQuery library for JavaScript. Their ajax implementation is alright with me.

Collectives™ on Stack Overflow

How to Upload an image, using javascript and php inside the window.onload function

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related