I previously had a code that allowed users to click on the submit button and have the text inside a contenteditable div passed to upload.php using JQuery, inserted into a database, and immediately displayed. Now, I want to modify this code to also handle images - uploading them to upload.php, inserting them into a MySQL database, and displaying them after storage. How can I adjust the code below to achieve this? Most resources I found suggest handling image uploads with form submitting buttons, which is not what I'm looking for.
Here's the HTML and CSS code:
<html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
</head>
<body>
<div id="topic_content_input" contenteditable="true"></div>
<input multiple class="fileInput" type="file" id="files" name="files[]"/>
<br>
<div id="submit" > Click me to upload the photo to upload.php</div>
<div name="topicreturn"></div>
</body>
</html>
<script>
$(function(){
$("#submit").click(function(){
var txtContent = $("#topic_content_input").text();
if(txtContent){
$.post("upload.php", {txtContent:txtContent}, function(result){
$("div[name=topicreturn]").prepend(result);
$("#topic_content_input").text('');
});
}
})
})
</script>
<style>
#topic_content_input{
height: 60px;
width:350px;
border:1px solid blue;
}
#submit{
background-color: #ffcc99;
display:inline-block;
padding:5px;
border-radius: 3px;
cursor:pointer;
}
</style>
And here's the PHP file (upload.php):
<?php
require('connect.php');
$content=$_POST["txtContent"];
$sql="insert into topics (content) VALUES ('".$content."')";
$result=mysqli_query($conn,$sql);
if($result){
echo $content;
}
else{
echo $content;
}
?>