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!"; } ?>