I have some hard times to save a blob (image file) to my sql-database. I have three files: a html form (form.php), an ajax script (ajax.js) and a php-file (save.php). I think i have some errors in my ajax.js, but after a long google search i couldn`t find a good solution. There must be a problem with the blob handling in JS....
HTML Form:
<div id="editEmployeeModal" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<form id="update_form" enctype="multipart/form-data">
<div class="modal-header">
<h4 class="modal-title">table bearbeiten</h4>
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
</div>
<div class="modal-body">
<input type="hidden" id="id_u" name="id" class="form-control" required>
<div class="form-group">
<label>Image</label>
<input type="file" id="image_u" name="image" class="form-control" required>
</div>
<div class="form-group">
<label>Überschrift 1</label>
<input type="text" id="header1_u" name="header1" class="form-control" required>
</div>
<div class="form-group">
<label>Überschrift 2</label>
<input type="text" id="header2_u" name="header2" class="form-control" required>
</div>
<div class="form-group">
<label>Text</label>
<input type="text" id="text_u" name="text" class="form-control" required>
</div>
<div class="form-group">
<label>Link</label>
<input type="text" id="link_u" name="link" class="form-control" required>
</div>
<div class="form-group">
<label>Link-Text</label>
<input type="text" id="linkText_u" name="linkText" class="form-control" required>
</div>
<div class="form-group">
<label>Datum</label>
<input type="date" id="datum_u" name="datum" class="form-control" required>
</div>
</div>
<div class="modal-footer">
<input type="hidden" value="2" name="type">
<input type="button" class="btn btn-default" data-dismiss="modal" value="Cancel">
<button type="button" class="btn btn-info" id="update">Update</button>
</div>
</form>
</div>
</div>
</div>
In form.php i specified all my Inputs and for the image type=file
Ajax Code:
$(document).on('click','.update',function(e) {
var id=$(this).attr("data-id");
var image=$(this).attr("data-image");
var header1=$(this).attr("data-header1");
var header2=$(this).attr("data-header2");
var text=$(this).attr("data-text");
var link=$(this).attr("data-link");
var linkText=$(this).attr("data-linkText");
var datum=$(this).attr("data-datum");
$('#id_u').val(id);
$('#image_u').val(image);
$('#header1_u').val(header1);
$('#header2_u').val(header2);
$('#text_u').val(text);
$('#link_u').val(link);
$('#linkText_u').val(linkText);
$('#datum_u').val(datum);
});
$(document).on('click','#update',function(e) {
var data = $("#update_form").serialize();
$.ajax({
data: data,
enctype: 'multipart/form-data',
type: "post",
url: "save.php",
success: function(dataResult){
var dataResult = JSON.parse(dataResult);
if(dataResult.statusCode==200){
$('#editEmployeeModal').modal('hide');
alert('Data updated successfully !');
location.reload();
}
else if(dataResult.statusCode==201){
alert(dataResult);
}
}
});
});
My PHP-Code:
if($_POST['type']==2){
$id=$_POST['id'];
$image= base64_encode(file_get_contents($_FILES['image']['tmp_name']));
$header1=$_POST['header1'];
$header2=$_POST['header2'];
$text=$_POST['text'];
$link=$_POST['link'];
$linkText=$_POST['linkText'];
$datum=$_POST['datum'];
$sql = "UPDATE `tblTable` SET `image`='$image',`header1`='$header1',`header2`='$header2',`text`='$text',`link`='$link',`linkText`='$linkText',`datum`='$datum' WHERE id=$id";
if (mysqli_query($conn, $sql)) {
echo json_encode(array("statusCode"=>200));
}
else {
echo "Error: " . $sql . "<br>" . mysqli_error($conn);
}
mysqli_close($conn);
}
}
My Datbase-Connection works fine. I can write and read all other Data (Text and Date) to my local Database. I think my problem is in the ajax.js. How can i specify $('#image_u').val(image); that it must handle a blob file and not just normal text input. And do i have to modify these lines?
var data = $("#update_form").serialize();
$.ajax({
data: data,
enctype: 'multipart/form-data',
type: "post",
url: "save.php",