Instant upload on selected - php

Question

I need a code that can instant upload an image from the pc to my website after I select it without needet to click submit or to refresh the page. This is the code that I have until now!
<img id="uploadPreviewprofile" style="max-width: 990px; max-height: 320px;text-align:center; position:absolute;" />
<div class="fileUploadprofile btn btn-primary" style="position:absolute; margin-top:298px;">
<form method="post" enctype="multipart/form-data">
<input id="uploadImageprofile" type="file" name="fotoprofile" class="uploadprofile" onchange="PreviewImageprofile();" />
</div>
<script type="text/javascript">
function PreviewImageprofile() {
var oFReader = new FileReader();
oFReader.readAsDataURL(document.getElementById("uploadImageprofile").files[0]);
oFReader.onload = function (oFREvent) {
document.getElementById("uploadPreviewprofile").src = oFREvent.target.result;
};
};
</script>
</div>

Answer 1

Just ajax it over to your server after you read the file, e.g.:
HTML
<input id="instant" type="file">
JavaScript
// Note: I am using jQuery here, so you need to include the library
$("#instant").on("change", function() {
$.each(this.files, function(index, file) {
// read file data
reader = new FileReader();
reader.onload = function(event) {
// send to server
$.post("upload.php", {name: file.name, image: event.target.result});
}
reader.readAsDataURL(file);
});
});
PHP
<?php
if($_POST["image"]) {
// image is base64 encoded, so let's unparse it
$parts = explode(",", $_POST["image"]);
// check that we have the image
if(isset($parts[1])) {
// save the image
file_put_contents($_POST["name"], base64_decode($parts[1]));
}
}
And that's all the magic..
Quick recap:
1) We select the image via standard file upload tag
2) We capture the change the push the base64 encoded image to the server using an AJAX Post
3) We parse the base64 encoded image (which is in the Data URI scheme) and decode the base64 data part of it. This will give us the binary data from the actual image/file to save to the hard drive using the original name of it.
Now this code doesn't have any checks, etc. But it gives you the core functionality to continue your work.