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>
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"]);
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();
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/
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));
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>