I have been able to successfully select an image and preview on iframe. I would like now to be able to take that previewed Image and upload into mysql table column as a Blob. I know that it is not in my best interest to upload images into database, but for my project it is in my best interest and as there will only be a limited amount of images to ever be uploaded. This is the code at where I am at. I have been able to upload image using another form but just cannot combine the scripts to work. Here is a working example of what i have so far, now i would like to take that previewed image and upload SampleApp
IFRAME
<img src="" id="image">
<input id="input" type="file" onchange="handleFiles()">
JAVASCRIPT
<script>
var img = document.getElementById("image");
var width = 400;
function handleFiles() {
var filesToUpload = document.getElementById('input').files;
var file = filesToUpload[0];
var reader = new FileReader();
reader.onload = function(e) {
img.onload = function() {
if (this.naturalWidth > width) {
this.width = width;
}
}
img.src = e.target.result;
}
reader.readAsDataURL(file);
}
</script>
CONNECTION
$con = mysqli_connect('****','*****','****','DBNAME') or die('Unable To connect');
$sql = "insert into images (image) values(?)";