PHP - Image loading and display on page

Question

The following code allows me to upload images (using the html form) to a directory on my server.

<?php $target = "http://www.mockcourt.org.uk/user/htdocs/pics/2012/"; $target = $target . basename( $_FILES['uploaded']['name']); $ok=1; if (move_uploaded_file($_FILES['uploaded']['tmp_name'], $target)) { echo "The file ". basename( $_FILES['uploadedfile']['name']). " has been uploaded"; } else { echo "Sorry, there was a problem uploading your file."; } ?> 

Is there a way to change it to add images to the html page instead?

thanks

Answer 1

Well, after downloading it, you can use javascript to put it on the html page.

I'm not quite sure what your question is though

EDIT:

So, the html form on your page:

 <form action="imageUpload.php" method="post" enctype="multipart/form-data" target="upload_target" onsubmit="jupload();" id="form1" > <div style="visibility:'hidden';" class="imageholder"> <!-- a gif image to show that the process wasn't finished --> </div> <input type="file" name="imgfile" /> <input type="submit" name="uploadButton" class="upbtn" value="Submit" /> </form> 

Javascript code (JQUERY) for uploading and adding images:

 function jupload() { $(".imageholder").append('<img src="./images/loading.gif">'); } function juploadstop(result) { if(result==0) { $(".imageholder").html(""); } // the result will be the path to the image else if(result!=0) { $(".imageholder").html(""); // imageplace is the class of the div where you want to add the image $(".imageplace").append("<img src='"+result+"'>"); } } 

php code:

 <?php $target = "http://www.mockcourt.org.uk/user/htdocs/pics/2012/"; $target = $target . basename( $_FILES['uploaded']['name']) ; $ok=1; if (move_uploaded_file($_FILES['uploaded']['tmp_name'], $target)) { $result=$target; } else { $result=0; } ?> <script language="javascript" type="text/javascript"> window.top.window.juploadstop(<?php echo $result; ?>); </script> 

Answer 2

Suppose you have a form in HTML to submit an image. Make a submit button, not a submit button, but just a button ... for example.

 <input type='button' id='submit_form' value='upload' /> 

and in javascript, use Ajax to submit the form and jQuery to display it on the web page

 $('#submit_form')click(function(){ $.ajax({ type: 'POST', url: path/phpfile.php, data: image_input_name }); //after submitting, get the url of the image form the server $('#div_to_display_image').html("<img src='path/image_file.jpg' alt='this' />"); }); 

Hope this helps :-)