javascript - Uploading Image with Bootsrap Modal -
i have problem uploading image bootsrap modal. problem if have selected image, validation error "your upload form empty".
here's form sript on view
<div class="modal fade" id="modal_form" role="dialog"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="close"><span aria-hidden="true">×</span></button> <h3 class="modal-title">user form</h3> </div> <div class="modal-body form"> <form action="#" id="form" class="form-horizontal" enctype="multipart/form-data"> <input type="hidden" value="" name="id_berita"/> <div class="form-body"> <div class="form-group"> <label class="control-label col-md-3">judul berita</label> <div class="col-md-9"> <input name="judul_berita" placeholder="judul berita" class="form-control" type="text"> <span class="help-block"></span> </div> </div> <div class="form-group"> <label class="control-label col-md-3">isi berita</label> <div class="col-md-9"> <textarea name="isi_berita" placeholder="isi berita ini" class="form-control"></textarea> <span class="help-block"></span> </div> </div> <div class="form-group"> <label class="control-label col-md-3">foto berita</label> <div class="col-md-9"> <input type="file" name="foto_berita" class="form-control"> <span class="help-block"></span> </div> </div> <input type="hidden" value="<?php echo $id_ses; ?>" name="id_user"/> <input type="hidden" value="<?php $tgl=date("y-m-d");echo $tgl;?>" name="postdate"/> <input type="hidden" value="<?php date_default_timezone_set('asia/taipei');$jam=date("h:i:s");echo $jam;?>" name="waktu"/> </div> </form> </div> <div class="modal-footer"> <button type="button" id="btnsave" onclick="save()" class="btn btn-primary">save</button> <button type="button" class="btn btn-danger" data-dismiss="modal">cancel</button> </div> </div><!-- /.modal-content --> </div><!-- /.modal-dialog --> the javascript :
<script type="text/javascript"> var save_method; //for save method string var table; $(document).ready(function() { //datatables table = $('#table').datatable({ "processing": true, //feature control processing indicator. "serverside": true, //feature control datatables' server-side processing mode. "order": [], //initial no order. // load data table's content ajax source "ajax": { "url": "<?php echo site_url('databerita/ajax_list')?>", "type": "post" }, //set column definition initialisation properties. "columndefs": [ { "targets": [ -1 ], //last column "orderable": false, //set not orderable }, ], }); //set input/textarea/select event when change value, remove class error , remove text block $("input").change(function(){ $(this).parent().parent().removeclass('has-error'); $(this).next().empty(); }); $("textarea").change(function(){ $(this).parent().parent().removeclass('has-error'); $(this).next().empty(); }); $("select").change(function(){ $(this).parent().parent().removeclass('has-error'); $(this).next().empty(); }); }); function add_berita(){ save_method = 'add'; $('#form')[0].reset(); // reset form on modals $('.form-group').removeclass('has-error'); // clear error class $('.help-block').empty(); // clear error string $('#modal_form').modal('show'); // show bootstrap modal $('.modal-title').text('add berita'); // set title bootstrap modal title } function edit_berita(id){ save_method = 'update'; $('#form')[0].reset(); // reset form on modals $('.form-group').removeclass('has-error'); // clear error class $('.help-block').empty(); // clear error string //ajax load data ajax $.ajax({ url : "<?php echo site_url('databerita/ajax_edit/')?>/" + id, type: "get", datatype: "json", success: function(data) { $('[name="id_berita"]').val(data.id_berita); $('[name="judul_berita"]').val(data.judul_berita); $('[name="isi_berita"]').val(data.isi_berita); $('[name="id_user"]').val(data.id_user); $('[name="postdate"]').val(data.postdate); $('[name="waktu"]').val(data.waktu); $('#modal_form').modal('show'); // show bootstrap modal when complete loaded $('.modal-title').text('edit berita'); // set title bootstrap modal title }, error: function (jqxhr, textstatus, errorthrown) { alert('error data ajax'); } }); } function reload_table(){ table.ajax.reload(null,false); //reload datatable ajax } function save(){ $('#btnsave').text('saving...'); //change button text $('#btnsave').attr('disabled',true); //set button disable var url; if(save_method == 'add') { url = "<?php echo site_url('databerita/ajax_add')?>"; } else { url = "<?php echo site_url('databerita/ajax_update')?>"; } // ajax adding data database $.ajax({ url : url, type: "post", data: $('#form').serialize(), datatype: "json", success: function(data) { if(data.status) //if success close modal , reload ajax table { $('#modal_form').modal('hide'); reload_table(); } else { (var = 0; < data.inputerror.length; i++) { $('[name="'+data.inputerror[i]+'"]').parent().parent().addclass('has-error'); //select parent twice select div form-group class , add has-error class $('[name="'+data.inputerror[i]+'"]').next().text(data.error_string[i]); //select span help-block class set text error string } } $('#btnsave').text('save'); //change button text $('#btnsave').attr('disabled',false); //set button enable }, error: function (jqxhr, textstatus, errorthrown) { alert('error adding / update data'); $('#btnsave').text('save'); //change button text $('#btnsave').attr('disabled',false); //set button enable } }); } function delete_berita(id){ if(confirm('are sure delete data?')) { // ajax delete data database $.ajax({ url : "<?php echo site_url('databerita/ajax_delete')?>/"+id, type: "post", datatype: "json", success: function(data) { //if success reload ajax table $('#modal_form').modal('hide'); reload_table(); }, error: function (jqxhr, textstatus, errorthrown) { alert('error deleting data'); } }); } } the controller
public function ajax_add() { $this->_validate(); $nmfile = "file_".time(); //nama file saya beri nama langsung dan diikuti fungsi time $config['upload_path'] = './assets/images/'; //path folder $config['allowed_types'] = 'gif|jpg|png|jpeg|bmp'; //type yang dapat diakses bisa anda sesuaikan $config['max_size'] = '2048'; //maksimum besar file 2m $config['max_width'] = '1288'; //lebar maksimum 1288 px $config['max_height'] = '768'; //tinggi maksimu 768 px $config['file_name'] = $nmfile; //nama yang terupload nantinya $this->load->library('upload',$config); if($_files['foto_berita']['name']){ if ($this->upload->do_upload('foto_berita')){ $berita = $this->upload->data(); $data = array( 'judul_berita' =>$this->input->post('judul_berita'), 'isi_berita' =>$this->input->post('isi_berita'), 'foto_berita' =>$berita['file_name'], 'id_user' =>$this->input->post('id_user'), 'postdate' =>$this->input->post('postdate'), 'waktu' =>$this->input->post('waktu'), ); $insert = $this->m_databerita->save($data); echo json_encode(array("status" => true)); } } } thank help.
here example on how used iframe in modal window upload picture, doing way avoided having reload page. not know if can ajax, here different approach.
first inside modal body add iframe, notice src view contains iframe information:
<iframe id="photo_uploader" src="/image_form" class="picture-upload-iframe"></iframe> this src view iframe, header.php , footer.php in case use multiple iframes different purposes , share header , footer:
<? include('header.php');?> <?= form_open_multipart('items/item_image_upload');?> <input id="upload-btn" name="userfile" type="file" class="upload" /> <button class="btn btn-primary" name="submit" type="submit" class="btn"> </form> <? include('footer.php'); now in controller, sample function, can add other fields in iframe if need submit them when upload picture need do. return true or false see if upload successful or not.
public function item_image_upload() { $data['file_name'] = false; $data['error'] = false; $config['allowed_types'] = 'gif|jpg|png'; $config['upload_path'] = $this->img_full; $config['encrypt_name'] = true; $config['remove_spaces'] = true; $this->load->library('upload', $config); if ( $this->upload->do_upload()) { $upload_data = $this->upload->data(); return true; } return false; }
Comments
Post a Comment