Postingan lainnya
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 ^^