Display image after clicking upload

Question

How to display images right after they clicked the upload button?

Here is my HTML Code:

form.php

<html>
<body>

<form action="uploadFile.php" method="post" enctype="multipart/form-data">
    <label for="file">Filename:</label>
    <input type="file" name="file" id="file"><br>
    <input type="submit" name="submit" value="Submit">
</form>

</body>
</html>

And here is my uploadFile.php code:(updated, but still not getting any result)

<?php
       // prevent timezone warnings
       date_default_timezone_set('Philippines/Manila');

      // set the upload location
      $UPLOADDIR = "images/";

        // if the form has been submitted then save and display the image(s)
    if(isset($_POST['Submit'])){
      // loop through the uploaded files
foreach ($_FILES as $key => $value){
    $image_tmp = $value['tmp_name'];
    $image_type=$value['type'];
    $image = $value['name'];
    $image_file = "{$UPLOADDIR}{$image}";

 //check if there's existing file name
  if ($image  != 0){
echo 'File Already Exists!';
}

  else {
    // move the file to the permanent location

  if(move_uploaded_file($image_tmp,$image_file)){

// this is where the displaying part goes
    echo <<<HEREDOC

    <div style="float:left;margin-right:10px">
        <img src="$editedShear" alt="This is your image" height=200 width=200/></br>
    </div>

HEREDOC;

    }
    else{
        echo "<h1>image file upload failed, image too big after compression</h1>";
         }
        }
}}
 else{
  ?>

<?php
 }
?>

you have to use ajax request for that , means you have do the uploading using ajax, and on success you can show up the image — Dimag Kharab, Feb 21 '14 at 08:54
No, just a broken image. With the description of the image. That's what I am getting after the submit button — user3335903, Feb 22 '14 at 02:31
Side note, and I know the question is a few days old already, but you're using `$editedShear` as the image source, and don't have it declared anywhere. Might help to turn on error reporting when you're debugging :) — Matthew Johnson, May 14 '14 at 15:41

score 0 · Answer 1 · edited May 23 '17 at 11:45

0

To do that you need to upload the image using some kind of ajax upload. if you don't know what is that, please read here http://en.wikipedia.org/wiki/Ajax_%28programming%29. You can find some free solutions and examples online. Here I found a stack overflow question that might help you with links to such a solutions

Ajax file upload

edited May 23 '17 at 11:45

Community

1
1

answered Feb 21 '14 at 09:01

Viktor Todorov

82
2

1

Thanks for the info, but do you think it'll be more complex if I use Ajax File Upload? Honestly, I think using Ajax is a lot complex than what I am trying to do. But still, thank you for the info. I'm gonna use it for future use. :) – user3335903 Feb 22 '14 at 03:10

score 0 · Answer 2 · edited Feb 12 '17 at 07:46

0

Add an iframe after your form:

<iframe name="resultFrame" width="500" height="300"></iframe>

And add the target="resultFrame" attribute in your form like this:

<html>
    <body>    
        <form action="uploadFile.php" method="post"
enctype="multipart/form-data" target="resultFrame">
            <label for="file">Filename:</label>
            <input type="file" name="file" id="file"><br>
            <input type="submit" name="submit" value="Submit">
        </form>

        <iframe name="resultFrame" width="500" height="300"></iframe>

    </body>
</html>

edited Feb 12 '17 at 07:46

Siful Islam

1,906
3
21
31

answered Feb 21 '14 at 09:34

Bamz3r

177
2
7

Still don't show any image. Thanks to your help BTW. :) – user3335903 Feb 22 '14 at 02:51
This code works fine but I think there's something wrong with my uploadFile.php file. I just don't know what it is. I will try to fix it. If you have any idea how. Keep me posted. Thank you :) – user3335903 Feb 22 '14 at 03:05

score 0 · Answer 3 · edited Sep 18 '14 at 18:08

0

Upload your image in a folder which contains your php/html file, and in img tag write the img name:

<img src="<?php echo $img;?>" width="400" height="600"/>

edited Sep 18 '14 at 18:08

skrrgwasme

9,358
11
54
84

answered Sep 18 '14 at 17:20

user4055477

1

– user4055477 Sep 18 '14 at 17:22

score 0 · Answer 4 · answered Oct 01 '15 at 10:36

/* i put image so that it has default

    <img id="blah" src="images/male.png" alt="your image" style="width:250px;height:200px;" />

/*put accept and its format so that you can only choose the image only

<input type='file' name="image"  onchange="readURL(this);" accept="image/gif,image/png,image/jpg,image/jpeg" />

/*changing the url of an image you can do it in jquery
function readURL(input) {
        if (input.files && input.files[0]) {
            var reader = new FileReader();

            reader.onload = function (e) {
                $('#blah')
                    .attr('src', e.target.result)
/*set the width and height of an image
                    .width(250)
                    .height(200);
            };

            reader.readAsDataURL(input.files[0]);
        }
    }

after that do your upload code

score 0 · Answer 5 · edited Feb 02 '17 at 19:27

What is the easiest way to upload images and display the uploaded images on same page? page "index.php"

<body>
<div id="body">
 <form action="upload.php" name="img_compress" method="post" enctype="multipart/form-data">
 <input type="file" name="file" />
 <button type="submit" name="btn-upload">upload</button>
 </form>
    <br /><br />
    <?php
 if(isset($_GET['success']))
 {
  ?><br><br><br>
        
    <?php
 $sql="SELECT * FROM tbl_uploads ORDER BY id DESC";
 $result_set=mysql_query($sql);
 while($row=mysql_fetch_array($result_set))
    {
  ?>
     <img src="uploads/<?php echo $row['file'] ?>" width="100%" height="100%">
    <?php
}
 ?>
   
        <?php
 }
 else if(isset($_GET['fail']))
 {
  ?>
        <label>Problem While File Uploading !</label>
        <?php
 }
 else
 {
  ?>
        <label>Try to upload any files(PDF, DOC, EXE, VIDEO, MP3, ZIP,etc...)</label>
        <?php
 }
 ?>
</div>
</body>

code for upload "upload.php"

<?php
include_once 'dbconfig.php';
if(isset($_POST['btn-upload']))
{    
     
 $file = $_FILES['file']['name'];
    $file_loc = $_FILES['file']['tmp_name'];
 $file_size = $_FILES['file']['size'];
 $file_type = $_FILES['file']['type'];
 $folder="uploads/";
 
 $new_size = $file_size/1024;  
 
 $new_file_name = strtolower($file);
 
 $final_file=str_replace(' ','-',$new_file_name);
 
 if(move_uploaded_file($file_loc,$folder.$final_file))
 {
  $sql="INSERT INTO tbl_uploads(file,type,size) VALUES('$final_file','$file_type','$new_size')";
  mysql_query($sql);
  ?>
  <script>
        window.location.href='index.php?success';
        </script>
  <?php
 }
 else
 {
  ?>
  <script>
  alert('error while uploading file');
        window.location.href='index.php?fail';
        </script>
  <?php
 }
}
?>

below one is fields for storing images enter image description here

you should consider editing your code. Bcoz your heading says "upload and display on the same page" while you are using 2 pages( upload.php and index.php ). — Muhammad Ali, May 23 '21 at 11:20

Display image after clicking upload

5 Answers5