将预览图像上传到Mysql

Question

我已经能够成功选择图像并在iframe上预览。我现在想能够将预览的Image作为Blob上传到mysql表列。我知道将图像上传到数据库并不符合我的最佳利益，但对于我的项目来说，这符合我的最佳利益，因为只有有限数量的图像可以上传。这是我所在的代码。我已经能够使用另一种形式上传图像，但只是无法将脚本组合起来工作。这是我到目前为止的一个工作示例，现在我想采取预览图像并上传      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(?)";