File Upload using Jquery Ajax without page refreshing:
file upload is possible through ajax. You can upload file, without refreshing page by using AJAX. With XHR2, File upload through AJAX is supported. E.g. through FormData object, but unfortunately it is not supported by old browsers. FormData support starts from following desktop browsers versions. IE 10+, Firefox 4.0+, Chrome 7+, Safari 5+, Opera 12+.
Step 1 :
Make a input type file like this :
<input type="file" id="file_1" name="file_1">
Step 2 :
Must include jquery.min.js, The link li bellow :-
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
Step 3 :
Now write this script :
<script> $('#file_1').change(function(e){ files = event.target.files; var data = new FormData(); $.each($('#file_1')[0].files,function(i,file){ data.append('file_1',file); }); console.log(); $.ajax({ type: 'post', url: 'result.php', processData : false, data: data, contentType : false, success: function(result){ console.log(result); } }); }); </script>
Step 4 :
Now write this php codes in action file e.g “result.php” :-
<?php $con = mysqli_connect("localhost","root","","my_file_upload"); if(!$con){ echo "Failed"; } $ext = pathinfo($_FILES['file_1']['name'],PATHINFO_EXTENSION); $new_file_name = time()."myimage".".".$ext; $qry = mysqli_query($con,"INSERT into file_list (`file_name`) value ('".$new_file_name."')"); move_uploaded_file($_FILES['file_1']['tmp_name'], 'my_file/'.$new_file_name); ?>
Related posts