Is it possible to show a image that is in a tmp folder before upload?

Question

I want to show the user a image before the user uploads it to the server to make sure that this image is what the user wanted to upload.

I have tryed to do this with $_FILES['name']['tmp_name'] and put this in a tag but nothing happens.

 <form action='' method='POST'  enctype="multipart/form-data">
        <header class='pageHeading'>Kop afbeedling toevoegen</header>            
        <section class='body'>               
            <div class='inputFrame'>  


                <img src="<?php if(isset($_FILES['image']['tmp_name'])){echo $_FILES['image']['name'];}?>"/>

                        <div class='input'>
                            <div class="cellFrame">
                                <div class="inputHeading">Afbeelding uploaden</div>
                                <div class="frame">
                                    <div class="frameAlign">
                                        <div class="displayFlie">
                                            <input type='file' name='image'/>
                                        </div>
                                        <button name='upload' class='btnUpload btn'>Upload</button>
                                        <div class="clr"></div>
                                    </div>
                                </div>
                            </div>
                        </div>



                <div class="clr"></div>   
            </div>
         </form>

Answer 1

simple solution - grab your image data convert to base64 and output in your current view, so you don't need to copy the current tmp image into an public loction- like

$imageData = file_get_contents($_FILES['image']['tmp_name']); // path to file like /var/tmp/...

// display in view
echo sprintf('<img src="data:image/png;base64,%s" />', base64_encode($imageData));

Answer 2

any files uploaded to the server if not moved will be deleted automatically. but do not worry. before uploading, you can display it using javascript or jQuery.

<form>
 <input type="file" accept="image/*" name="" onchange="previewImage()">
 <img id="preview">
</form>

<script>
 function previewImage(){
  var previewBox = document.getElementById("preview");
  previewBox.src = URL.createObjectURL(event.target.files[0]);
 }
</script>