this is my HTML and JavaScript codes
HTML CODE
<h1>Input element</h1>
<form action=" ">
<input type="file" name="picture" accept="image/*" onChange="loadfile(event)">
<label for="file">UpLoad</label>
<input type="submit">
</form>
<img id="pics" width="200px" height="200px" style="display: none;">
JavaScript Code
<script>
var loadfile = function(event){
var image = document.getElementById('pics');
image.style.display = "block";
image.src = URL.createObjectURL(event.target.files[0]);
};
</script>
You need to receive an image on the server with the code same as below on php:
<?php
function get_uploadFile() {
$upload_path = 'upload-path/';
$upload_filename = $upload_path . basename($_FILES['uploadFile']['name']);
if (move_uploaded_file($_FILES['uploadFile']['tmp_name'], $upload_filename)) {
return $upload_filename;
} else {
return false;
}
}
if ($src = get_uploadFile()) {
echo '<img src="' . $src . '">';
} else {
echo 'Error uploading file!';
}