I am new to Jquery, Ajax and php,
I written a program , which upload file to a database as a blob file , i succeeded in uploading the file to the database. but here comes a problem , now i am unable to print the success message in the <div id="msg"></div> section, after the file is being submitted. i tried the other ways and questions given in stackover flow but none worked out for me. the file
"index.php"
contains code for ajax and file upload, where as the upload.php contains logic for inserting the file into database.
index.php
<?php include_once 'dbconfig.php'; ?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>File upload</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function() {
$("#button").click(function() {
var formData = new FormData();
formData.append('file', $('#file')[0].files[0]);
$.ajax({
url : 'upload.php',
type : 'POST',
data : formData,
processData: false,
contentType: false,
success : function(data) {
//console.log(data);
document.getElementbyID("msg").innerHTML()="";
alert(data);
}
});
});
});
</script>
</head>
<body>
<div id="header">
<tt>Upload file</tt>
</div>
<div id="msg"></div>
<form id="form" name="form" enctype="multipart/form-data">
<input type="file" name="file" id="file" />
<button id="button" name="button"/>Submit</button>
</form>
</body>
</html>
upload.php
<?php
include_once 'dbconfig.php';
$file = rand(1000, 100000)."-".$_FILES['file']['name'];
$file_loc = $_FILES['file']['tmp_name'];
$file_size = $_FILES['file']['size'];
$file_type = $_FILES['file']['type'];
$folder = "upload/";
// new file size in KiloByte
$new_size = $file_size / 1024;
// make file name in lower case
$new_file_name = strtolower($file);
$final_file=str_replace(' ', '-', $new_file_name);
if (move_uploaded_file($file_loc, $folder.$final_file)) {
$sql = "INSERT INTO files(file) VALUES('$final_file')";
mysqli_query($connection, $sql);
mysqli_close($connection);
}
?>
