Update 07/10/24 · Read 2 min
Sumbit or Post file, image from Ajax JQuery + PHP it’s very simple code.
Form HTML :
<div class="col-3 ml-3"> <h4>Register</h4> <form id="sigup"> <div class="mb-3"> <label for="exampleInputEmail1" class="form-label">Name</label> <input type="email" class="form-control" name="name"> </div> <div class="mb-3"> <label for="exampleInputEmail1" class="form-label">Profil</label> <input type="file" class="form-control" id="profil" name="profil"> </div> <div class="mb-3"> <label for="exampleInputEmail1" class="form-label">Username</label> <input type="text" class="form-control" name="username"> <div id="emailHelp" class="form-text">We'll never share your username anyone!</div> </div> <div class="mb-3"> <label for="exampleInputPassword1" class="form-label">Password</label> <input type="password" class="form-control" name="password"> </div> <p id="msg"></p> <button id="redirect" type="button" class="btn btn-primary">Sig Up</button> </form> </div>
Ajax Jquery
<script type="text/javascript">
$(document).ready(function(){
$("#redirect").click(function(){
var formData = new FormData($('#sigup')[0]);
console.log(Object.fromEntries(formData));
$.ajax({
type: "POST",
url: "<?=base_url('user/reg');?>",
//data:JSON.stringify(Object.fromEntries(formData)),
data:formData,
//contentType: "application/json",
contentType:false,
processData: false,
success: function(res){
if(res==1){
msg_('<font color=green> Add succesfully.</font>');
$('#sigup')[0].reset();
console.log(res);
// storing url and time
$("#redirect").text("Redirecting..");
let delay =5000;
let url = "<?= base_url('/cart');?>";
setTimeout(function(){
location = url;
},delay);
}else{
msg_('<font color=red>'+res+'</font>');
console.log(res);
}
},
error: function(res){ // respon ajax, jquery before controller
console.log(res);
}
});// you have missed this bracket
});
});
</script>
Note : reqired setup!
contentType:false, processData: false,
Get respon value data PHP file, image:
<?php
// get data file
$namaFile = $_FILES['profil']['name'];
$namaSementara = $_FILES['profil']['tmp_name'];
// folder file images
$dirUpload = "media/";
// send file
$terupload = move_uploaded_file($namaSementara, $dirUpload.$namaFile);
if ($terupload) {
echo "Upload successfuly.<br/>";
echo "Link: <a href='".$dirUpload.$namaFile."'>".$namaFile."</a>";
} else {
echo "Upload failur!";
}
?>