ブートストラップモードで画像をアップロードする

Question

ブートスラップモードで画像をアップロードする際に問題があります。問題は、イメージを選択しても、私はいつもあなたのアップロードフォームが空であるという検証エラーが出るということです。

ここでビューに私のフォームsript

<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">&times;</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 --> 

の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 the processing indicator. 
    "serverSide": true, //Feature control DataTables' server-side processing mode. 
    "order": [], //Initial no order. 

    // Load data for the table's content from an 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 and remove text help 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 to 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 from 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 to Bootstrap modal title 

    }, 
    error: function (jqXHR, textStatus, errorThrown) 
    { 
     alert('Error get data from 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 to database 
$.ajax({ 
    url : url, 
    type: "POST", 
    data: $('#form').serialize(), 
    dataType: "JSON", 
    success: function(data) 
    { 

     if(data.status) //if success close modal and reload ajax table 
     { 
      $('#modal_form').modal('hide'); 
      reload_table(); 
     } 
     else 
     { 
      for (var i = 0; i < data.inputerror.length; i++) 
      { 
       $('[name="'+data.inputerror[i]+'"]').parent().parent().addClass('has-error'); //select parent twice to select div form-group class and 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 you sure delete this data?')) 
{ 
    // ajax delete data to 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'); 
     } 
    }); 

} 
} 

コントローラ

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)); 
     } 
    } 
} 

ありがとうございます。

Answer 1

ここでは、モーダルウィンドウでiFrameを使用して写真をアップロードする方法の例を示します。この方法で、ページをリロードする必要はありません。私はあなたがajaxでそれを行うことができるかどうかはわかりませんが、ここでは別のアプローチです。

まずモーダル体内のSRCに気づく、iFrameを追加は、iframeの情報が含まれている図である。

<iframe id="photo_uploader" src="/image_form" class="picture-upload-iframe"></iframe> 

これは、IFRAMEのsrc図であり、header.phpのとfooter.phpであります場合にはあなたが異なる目的のために複数のiframeを使用して、彼らは、ヘッダーとフッターを共有：あなたがする必要がある場合、これは単なるサンプル関数である、あなたのコントローラで今

<? 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'); 

を、あなたは、iframe内に他のすべてのフィールドを追加することができますあなたが写真をアップロードしてから何をするときにそれらを提出するあなたはする必要があります。アップロードが成功したかどうかを確認するために、真または偽を返します。