I am working on ajax and PHP. When I click on the post button the message value removes by $(“#message”).val(“”); after ajax success (data inserted into the database by PHP and ajax ) but the file(browse ), the image doesn’t remove after success. The file should be empty after AJAX success and the ajax code is not run if I leave the image. I want to leave an image and the message should be inserted without an image and with the image is working.
$(document).on("click", "#save", function (e) {
e.preventDefault();
var form_data = new FormData();
form_data.append('message', message)
var property = document.getElementById('photo').files;
property = property[0]; if(property){//you have to check if the files exists or it will fail trying to access properties from an undefined object
var image_name = property.name;
var image_extension = image_name.split('.').pop().toLowerCase();
form_data.append("file",property);
}
//Ajax call to send data to the insert.php
$.ajax({
type: "POST",
url: "insert_posts.php",
data: form_data,
contentType:false,
cache:false,
processData:false,
success: function (data) {
//Insert data before the message wrap div
$(data).insertBefore(".message-wrap:first");
//Clear the textarea message
$("#message").val("");
$("#form")[0].reset();
$('#preview').attr('src', "#");
$("#photo").val("");
}
});
});
The post button doesn’t work when I leave the image file. but when I leave the text blank and select the image from the computer then the post button works. I want the post button should be work when I leave the browse file. And After ajax success, the file browse should be empty.
<div class="c-header">
<div class="c-h-inner">
<ul>
<li><input type="file" onchange="readURL(this);" style="display:none;" name="photo" id="photo"></li>
<li><img src="assets/icon/icon1.png"></img><a href="#" id="uploadTrigger" name="post_image">Add Photo</a></li>
</ul>
</div>
</div>
<div class="c-body">
<div class="body-left">
<div class="img-box">
<img src="<?php echo 'assets/images/'.$image;?>"></img>
</div>
</div>
<div class="body-right">
<textarea class="text-type" name="message" id="message"
placeholder="What's on your mind?"></textarea>
</div>
<div id="body-bottom">
<img src="#" id="preview"/>
</div>
</div>
<div class="c-footer">
<div class="right-box">
<ul>
<li><input type="submit" name="save" id="save" value="Post" class="btn2"/></li>
</ul>
<br>
</div>
I am using js to show image preview.
ew
<script type="text/javascript">
//Image Preview Function
$("#uploadTrigger").click(function(){
$("#photo").click();
});
function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
$('#body-bottom').show();
$('#preview').attr('src', e.target.result);
}
reader.readAsDataURL(input.files[0]);
}
}
</script>
The image preview should be clear or remove after ajax success and post button should be work when i leave image to browse .
Advertisement
Answer
The file input should reset however you need to remove the preview image like:
var form_data = new FormData();
form_data.append('message', message)
var property = document.getElementById('photo').files;
property = property[0];
if(property){//you have to check if the files exists or it will fail trying to access properties from an undefined object
var image_name = property.name;
var image_extension = image_name.split('.').pop().toLowerCase();
form_data.append("file",property);
}
success: function (data) {
//Insert data before the message wrap div
$(data).insertBefore(".message-wrap:first");
//Clear the textarea message
$("#message").val("");
$("#form")[0].reset();
$('#preview').attr('src', "#");//Reset the preview to the original state
}
If the file input is not resetting try to add $("#photo").val("");
inside the success function.