I'm trying to find a way to input an image directly onto the same page, but I can't figure it out.
The image doesn't need to be saved when navigating away from the page.
I've tried:
<form action="#" method="post">
but I still can't figure out how to actually put it where I want it.
This might be really simple and I'm just overthinking it, but I've been googling for hours with no result.
On
You need to leave empty form action and specify enctype
Example:
<form action="" method="POST" enctype="multipart/form-data">
<input type="file">
<input type="submit">
</form>
This will push image into $_FILES array in php. For uploading images you need to view http://www.w3schools.com/php/php_file_upload.asp
If I understand you correctly, basically what you are trying to do is impossible. (without ajax)
The basic way a web-site works is:
If you're trying to change the page after it has been sent to the browser (i.e. add an image), then you need to do some work behind the scenes.
Since javascript has no access to the local machine outside the browser sandbox you'll have to get the user/javascript to send the image to the server, and the server then has to send it back to your javascript (which can then embed it in your page)
jquery or similar is probably the way to go.
You'll need a page/script on your server to handle the upload and serving of the image file.
Alternative
A simpler method might be to have a file input field on a form in your initial page with no image, when the page is submitted, check the $_FILES variable (see move_uploaded_file) and now serve the same page this time with the uploaded file displayed. You could then delete the image file from your server if you need it only once.