Postingan lainnya
Buku Ini Koding!
Baru!
Buku ini akan jadi teman perjalanan kamu belajar sampai dapat kerjaan di dunia programming!
nerima upload image ajax
gimana cara ambil post image melalui ajax. terima kasih https://imgur.com/a/1wiKd
code html
<form role="form" id="form-background" action="tambah" enctype="multipart/form-data">
<div class="form-group">
<label for="Foto"><b>Foto</b></label>
<input type="file" name="foto" id="Foto">
</div>
<div class="form-group">
<label for="title_background"><b>Title Background</b></label>
<input type="text" class="form-control input-block-level" name="title" id="title_background" placeholder="Title">
</div>
<div class="form-group">
<label for="Foto"><b>Description</b></label>
<div id="wrap_editor"></div>
</div>
</form>
ajax nya
$(document).on('click', '#submit-background', function(eve){
eve.preventDefault();
var action = $('#form-background').attr('action');
var datatosend = $('#form-background').serialize()+ '&description='+editor.getData()+'&foto='+new FormData('#form-background');
alert(datatosend);
$.ajaxFileUpload('http://'+host+path+'/action/'+action,{
dataType:'json',
type: 'POST',
fileElementId :'foto',
data: datatosend,
cache:false,
success: function(data){
if(data.status != ''){
alert(data.status);
ambil_artikel(null,false);
$('#myModal').modal('hide');
}
else{
$.each(data.errors, function(key, value){
$('#'+key).attr('placeholder', value);
});
}
}
});
});
6 Jawaban:
Ini sekedar koreksi dulu gan , ini pake jquery ajax file upload kan ya ? nah terus $('#form-background').serialize() dan new FormData('#form-background') ini fungsi nya hampir sama cuma serialize() support browser yang belum bisa pakai FormData API .
Dan saya rasa bisa kok tinggal pake formData aja di var datatosend tinggal mas bikin var datatosend = new FormData('#form-background'); terus sendnya bisa pake
$.ajax({
type: "POST",
url: url,
data: datatosend
// kode yang lain
});
Terus ajaxFileUpload kalau emang dia udah gak update mending ganti aja nanti banyak bugs kalau masnya bisa solve sendiri sih gapapa ^^
Saran kalau pake jquery pakai ini https://github.com/blueimp/jQuery-File-Upload
untuk di controller nya gimana mas? saya pakai gini tapi ga tampil hasil nya
$post = $this->input->post();
$foto = $post['foto'];
$result = array('status' => $foto);
echo json_encode($result);
koreksi js nya jadi seperti ini
$(document).on('click', '#submit-background', function(eve){
eve.preventDefault();
var action = $('#form-background').attr('action');
var datatosend = new FormData('#form-background');
alert(datatosend);
$.ajax('http://'+host+path+'/action/'+action,{
dataType:'json',
type: 'POST',
data: datatosend,
cache:false,
success: function(data){
if(data.status != ''){
alert(data.status);
ambil_artikel(null,false);
$('#myModal').modal('hide');
}
else{
$.each(data.errors, function(key, value){
$('#'+key).attr('placeholder', value);
});
}
}
});
});
Jawaban Terpilih
Ini mas referensi https://www.mkyong.com/jquery/jquery-ajax-submit-a-multipart-form/ udah dijelasin disitu malahan ^^
@markeronly masih belom paham mas. ref yang dikasih kga ngasih ke controller nya. yang saya tanya kan bagaimana menangkap post foto yang dikirim via ajax itu..
@markeronly saya belajar masih setengah" nih. jadi kalau kita pakai ajax begitu kita pilih langsung masuk ke directory yang kita pilih yaa. terimakasih sudah menjawab
@rankoms menangkap post nya sama kaya biasanya tanpa ajax mas, kalau dari syntax yg di pake mas pake ci ya ? Nah mas buka dokumentasinya CI https://www.codeigniter.com/user_guide/libraries/file_uploading.html?highlight=upload di dokumentasikan itu bukan ajax nah di bagian viewnya mas rubah tambahin pake ajax. Sama sama belajar mas ^^