javascript - PHP and JS - upload picture not showing -
(i 1 day old php please pardon if repeated) have code upload images uploads/ directory in website folder. done through index.html , upload.php given below , seen php - upload picture , display on page.
however, not able display pictures on html page required. redirects upload.php no imageholder there. how that? index.html works fine guessing php settings should fine. followed this , this , this install , setup everything.
index.html
<!doctype html> <html> <head> <script language= "javascript" type="text/javascript"> function juploadstop(result){ console.log(typeof result); if(result==0){ $(".imageholder").html(""); } else if(result!=0){ $(".imageholder").html("<img src='"+result+"'>"); } } </script> </head> <body> <form action="upload.php" method="post" enctype="multipart/form-data"> <div class="imageholder"> <!-- gif image show process wasn't finished --> </div> select image upload: <input type="file" name="filetoupload" id="filetoupload"> <input type="submit" value="upload image" name="submit"> </form> </body> </html> and upload.php
<?php $target_dir = "uploads/"; $target_file = $target_dir . basename($_files["filetoupload"]["name"]); $result = $target_file; $uploadok = 1; $imagefiletype = pathinfo($target_file,pathinfo_extension); // check if image file actual image or fake image if(isset($_post["submit"])) { $check = getimagesize($_files["filetoupload"]["tmp_name"]); if($check !== false) { $uploadok = 1; } else { $uploadok = 0; } } if($imagefiletype != "jpg" && $imagefiletype != "png" && $imagefiletype != "jpeg") { // echo "sorry, jpg, jpeg, png & gif files allowed."; $uploadok = 0; } if ($uploadok == 0) { // echo "sorry, file not uploaded."; } else { if (move_uploaded_file($_files["filetoupload"]["tmp_name"], $target_file)) { $result = $target_file; } else { $result = 0; } } ?> <script language="javascript" type="text/javascript"> window.top.window.juploadstop(<?php echo $result; ?>); </script> edit 1 added
header("location: index.html"); to end of php code before php section finishes, , not redirect anymore. however, image still not display.
you can using java script there's no need that. easiest way few lines of php. change name of file index.html index.php can use php in file.
in index.php file add code after close form:
<br> here uploaded images: <br> <?php $dirname = "uploads/"; $images = glob($dirname."*{jpg,png,gif}", glob_brace); foreach($images $image) { echo '<img src="'.$image.'" /><br />'; } ?> <br> this lines show images uploads folder.
so have this:
<!doctype html> <html> <head> <script language= "javascript" type="text/javascript"> function juploadstop(result){ console.log(typeof result); if(result==0){ $(".imageholder").html(""); } else if(result!=0){ $(".imageholder").html("<img src='"+result+"'>"); } } </script> </head> <body> <form action="upload.php" method="post" enctype="multipart/form-data"> <div class="imageholder"> <!-- gif image show process wasn't finished --> </div> select image upload: <input type="file" name="filetoupload" id="filetoupload"> <input type="submit" value="upload image" name="submit"> </form> <br> here uploaded images: <br> <?php $dirname = "uploads/"; $images = glob($dirname."*{jpg,png,gif}", glob_brace); foreach($images $image) { echo '<img src="'.$image.'" /><br />'; } ?> <br> </body> </html> you need add in upload.php file @ end:
header('location: index.php'); make sure add before close php tag there.this line redirect on index page.
hope helpful you!
Comments
Post a Comment