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>

Show your code, just need to show the file form tmp as you said, so there must be something wrong with your code — Sal00m, Aug 29 '14 at 09:01
tmp_name (as whole $_FILES) you have AFTER upload, not before. — Nebojsa Susic, Aug 29 '14 at 09:04
Check http://khantmontu.blogspot.in/2012/08/display-image-preview-before-it-upload.html and http://stackoverflow.com/questions/16207575/how-to-preview-a-image-before-and-after-upload — Jenz, Aug 29 '14 at 09:05
Maybe this link can be help you and others for the future. http://stackoverflow.com/questions/14069421/show-an-image-preview-before-upload — Ridwan Pujakesuma, May 16 '16 at 14:33
You can see the solution of your problem here using js: [Preview an image before it is uploaded](https://stackoverflow.com/questions/4459379/preview-an-image-before-it-is-uploaded) As you can see in that thread there are different solutions for IE and FF/Chrome. So take care of this as well. — WhiteAngel, Aug 29 '14 at 09:06
Try this jQuery Method https://stackoverflow.com/a/62218223/11766145 OR javaScript https://stackoverflow.com/a/62167551/11766145 — Merrin K, Oct 01 '20 at 14:59

score 13 · Answer 1 · answered Aug 29 '14 at 09:19

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));

score 1 · Answer 2 · answered Aug 29 '14 at 09:05

After the image is submitted, it's already uploaded to the server in a temporary file. If you need to show the contents of the image from that temporary file, then you need to do a script that reads that file and outputs it with the right headers. Here's an example:

header('Content-Type: image/x-png');
readfile($_FILES['name']['tmp_name']);
exit();

Rif'an Adha · Answer 3 · 2018-04-07T04:22:51.177

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>

score 0 · Answer 4 · answered Aug 29 '14 at 09:05

0

Have you tried reading the file directly from the /tmp folder? Of course this can only happen after the upload, not before. So you have to do this before moving the file to its destinated folder, but right after the upload.

readfile($_FILES["name"]["tmp_name"]);

answered Aug 29 '14 at 09:05

JoelP

439
1
3
13

$_FILES["name"]["tmp_name"] already has the full path, adding another /tmp/ before it will not show anything, the temporary directory is config based – alez007 Aug 29 '14 at 09:06

score 0 · Answer 5 · edited May 23 '17 at 12:00

0

You have two ways of doing this.

The first is using a javascript code to show the preview before uploading to server, you can check this answer: Image Upload with Preview and Delete

The second one is to upload the image and retrieve a thumbnail from server to show in clientside, you can check this post: http://www.sitepoint.com/image-upload-example/

edited May 23 '17 at 12:00

Community

1
1

answered Aug 29 '14 at 09:05

Aboca

575
2
9

Merrin K · Answer 6 · 2020-10-01T14:56:18.153

Yes, it is possible to show the image in the tmp folder. Add an onchange event for input type = file; which triggers a function and it loads the image.

!!! Don't forget to set width for img tag

function preview() {
 $('#frame').attr('src',URL.createObjectURL(event.target.files[0]));
}

<head>
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
  <form>
     <input type="file" onchange="preview()">
     <img src="" width="100px" height="100px" id="frame">
  </form>   
</body>

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

6 Answers6