Upload file gambar dengan codeigniter dan ajax

saya ingin upload gambar menggunakan ajax di codeigniter namun saya tidak berhasil menyimpan nama file gambar tersebut ke dalam database. namun untuk file gambar tersebut sudah berhasil tersimpan ke direktori yang sudah ditentukan.

mohon solusinya agan2 sekalian... terimakasih

FORM INPUTAN YANG SAYA GUNAKAN…

<!DOCTYPE html>
<html lang="en">
<meta charset="utf-8">

<head>

<?php $this->load->view("admin/_partials/head.php") ?>
<script src="<?php echo base_url()?>assets/js/ajaxfileupload.js"></script>
</head>

<body id="page-top">

  <div id="wrapper">

  <?php $this->load->view("admin/_partials/sidebar.php") ?>

    <div id="content-wrapper" class="d-flex flex-column">

      <div id="content">

      <?php $this->load->view("admin/_partials/navbar.php") ?>

        <div class="container-fluid">

<div class="card mb-3">
  <div class="card-body">
        <div class="input-group mb-3">
        <div class="input-group-prepend">
            <button class="btn btn-outline-secondary" type="button">Cari</button>
        </div>
        <input type="text" class="form-control" id="no_lhp"  name="no_lhp" aria-label="Example text with button addon" aria-describedby="button-addon1">
        </div>
        <div id="pesan-sukses" class="alert alert-success" style="margin: 10px 20px;"></div>
  </div>
</div>
<form>
<div class="row mb-3">
  <div class="col-sm-6">
    <div class="card">
      <div class="card-body">
      <h5 class="card-title">Data Rekomendasi</h5>
      <input class="form-control mb-3" type="hidden" id="idrekomendasi" name="idrekomendasi" placeholder="No Rekomendasi" readonly>
      <input class="form-control mb-3" type="text" id="no_lhp1" name="no_lhp1" placeholder="No LHP" readonly>
      <input class="form-control mb-3" type="text" id="tgl_lhp" name="tgl_lhp" placeholder="Tgl Lhp" readonly>
      <input class="form-control mb-3" type="hidden" id="idskpd" name="idskpd" placeholder="ID SKPD" readonly>
      <input class="form-control mb-3" type="text" id="skpd" name="skpd" placeholder="OPD" readonly>
      <input class="form-control mb-3" type="hidden" id="idpemeriksa" name="idpemeriksa" placeholder="ID Pemeriksa" readonly>
      <input class="form-control mb-3" type="text" id="pemeriksa" name="pemeriksa" placeholder="Pemeriksa" readonly>
      <input class="form-control mb-3" type="text"  id="thn_periksa" name="thn_periksa" placeholder="Tahun Pemeriksa" readonly>
      <textarea class="form-control mb-3" id="obyek_periksa" name="obyek_periksa"  rows="3" placeholder="Obyek Pemeriksaan" readonly></textarea>
      <textarea class="form-control mb-3" id="uraian" name="uraian"  rows="3" placeholder="Uraian/Ringkasan" readonly></textarea>
      </div>
    </div>
  </div>
  </form>

  <div class="col-sm-6">
    <div class="card">
      <div class="card-body">
         <h5 class="card-title">Tindak Lanjut Rekomendasi</h5>
         <hr/>
          <div class="col-auto">
              <button type="button" class="btn btn-outline-primary  mb-2" id="btn-tambah" data-toggle="modal" data-target="#form-modal">Open Form TLHP</button>
          </div>

        </div>
      </div>
    </div>
  </div>
</div>

        </div>
      <?php $this->load->view("admin/_partials/footer.php") ?>
    </div>

  </div>

      <?php $this->load->view("admin/_partials/scrolltop.php") ?>
      <?php $this->load->view("admin/_partials/modal.php") ?>
      <?php $this->load->view("admin/_partials/js.php") ?>
      <script src="<?php echo base_url('assets/js/lhp.js'); ?>"></script>

      <script>
        $(document).on('click','#btn-simpan',function(e){
            e.preventDefault();
            var file_data = $('#gambar').prop('files')[0];
            var form_data = new FormData();

            form_data.append('file', file_data);
            $.ajax({
                url: '<?php echo site_url("lhp/uploadgambar") ?>',                 dataType: 'json',                  cache: false,
                contentType: false,
                processData: false,
                data: form_data,
                type: 'post',
                success: function(data,status){
                               if (data.status!='error') {
                        $('#gambar').val('');
                        alert(data.msg);
                    }else{
                        alert(data.msg);
                    }
                }
            });
        })
    </script>

</body>
</html>

<div id="form-modal" class="modal fade">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
                    <h4 class="modal-title">


                        <span id="modal-title"></span>
                    </h4>
                </div>
                <div class="modal-body">

                    <div id="pesan-error" class="alert alert-danger"></div>
                    <form>
                                <input class="form-control mb-3" type="hidden" id="no_lhp1" name="no_lhp1" placeholder="No LHP" readonly>
                                <input class="form-control mb-3" type="hidden" id="idskpd" name="idskpd" placeholder="ID SKPD" readonly>
                                <input class="form-control mb-3" type="hidden" id="idpemeriksa" name="idpemeriksa" placeholder="ID Pemeriksa" readonly>
                                <input class="form-control mb-3" type="hidden" id="idrekomendasi" name="idrekomendasi" placeholder="No Rekomendasi" readonly>

                        <div class="form-group">
                            <label>Tanggal</label>
                            <input type="date" class="form-control tgl_tlhp" id="tgl_tlhp" name="tgl_tlhp">
                        </div>

                        <div class="form-group">
                            <label>Keterangan</label>
                            <textarea class="form-control" id="ket" name="ket" rows="3"></textarea>
                        </div>

                        <div class="form-group">
                            <label>Nominal</label>
                            <input type="text" class="form-control" id="nominal" name="nominal" onkeyup="convertToRupiah(this);">
                        </div>

                        <div class="form-group">
                            <label>Status</label>
                            <select class="form-control" id="status" name="status">
                            <option>-- Pilih --</option>
                              <option>BSR</option>
                              <option>SSR</option>
                            </select>
                        </div>

                        <div class="form-group">
                            <label>Upload File</label>
                            <input type="file" class="form-control" name="gambar" id="gambar">
                        </div>

                    </form>
                </div>
                <div class="modal-footer">

                    <div id="loading-simpan" class="pull-left">
                        <b>Sedang menyimpan...</b>
                    </div>

                    <div id="loading-ubah" class="pull-left">
                        <b>Sedang mengubah...</b>
                    </div>
                    <button type="button" class="btn btn-primary" id="btn-simpan">Simpan</button>

                    <button type="button" class="btn btn-primary" id="btn-ubah">Ubah</button>
                    <button type="button" class="btn btn-default" data-dismiss="modal">Tutup</button>
                </div>
            </div>
        </div>
    </div>

CONTROLLER YANG SAYA GUNAKAN…

<?php
defined('BASEPATH') OR exit('No direct script access allowed');

class Lhp extends CI_Controller {

  public function __construct(){
    parent::__construct();
    $this->load->model('Lhp_model');
    $this->load->model("Login_model");
    if($this->Login_model->isNotLogin()) redirect(site_url('auth'));

  }

  public function index(){

    $this->load->view('admin/lhp');
  }

  function get_rekomendasi(){
  $no_lhp=$this->input->post('no_lhp');
  $data=$this->Lhp_model->get_rekomendasi_bykode($no_lhp);
  echo json_encode($data);
  }
  public function uploadgambar(){
    $config['upload_path'] = './assets/document';
    $config['allowed_types'] = 'gif|jpg|png';
    $config['max_size']  = '1000';
    $config['max_width']  = '1024';
    $config['max_height']  = '768';

    $this->load->library('upload', $config);

    if ( ! $this->upload->do_upload('file')){
        $status = "error";
        $msg = $this->upload->display_errors();
    }
    else{
        $dataupload = $this->upload->data();
        $status = "success";
        $msg = $dataupload['file_name']." berhasil diupload";
    }
    $this->output->set_content_type('application/json')->set_output(json_encode(array('status'=>$status,'msg'=>$msg)));
}

  public function simpan(){
    if($this->Lhp_model->validation("save")){
        $this->Lhp_model->save();

      $html = $this->load->view('admin/viewlhp', array('model'=>$this->Lhp_model->view()), true);
      $callback = array(
        'status'=>'sukses',
        'pesan'=>'Data berhasil disimpan',
        'html'=>$html
      );
    }else{
      $callback = array(
        'status'=>'gagal',
        'pesan'=>validation_errors()
      );
  }
    echo json_encode($callback);
    }
}

MODEL YANG SAYA GUNAKAN…

<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed');

class Lhp_model extends CI_Model {

  public function duatable() {
    $this->db->select('*');
    $this->db->from('rekomendasi');
    $this->db->join('skpd','skpd.idskpd=rekomendasi.idskpd');
    $this->db->join('pemeriksa','pemeriksa.idpemeriksa=rekomendasi.idpemeriksa');
    $query = $this->db->get();
    return $query->result();
   }

  public function view(){
    $this->db->select('*');
    $this->db->from('tlhp');
    $this->db->join('skpd','skpd.idskpd=tlhp.idskpd');
    $this->db->join('pemeriksa','pemeriksa.idpemeriksa=tlhp.idpemeriksa');
    $this->db->join('rekomendasi','rekomendasi.idrekomendasi=tlhp.idrekomendasi');
    $this->db->order_by('id_tlhp','DESC');
    $query = $this->db->get();
    return $query->result();
  }

        function get_rekomendasi_bykode($no_lhp){
          $hsl=$this->db->query("SELECT rekomendasi.*,skpd.skpd,pemeriksa.pemeriksa FROM rekomendasi,
          skpd,pemeriksa WHERE rekomendasi.idskpd=skpd.idskpd and rekomendasi.idpemeriksa=pemeriksa.idpemeriksa
          and rekomendasi.no_lhp='$no_lhp'");
          if($hsl->num_rows()>0){
              foreach ($hsl->result() as $data) {
                  $hasil=array(
                      'no_lhp1' => $data->no_lhp,
                      'tgl_lhp' => $data->tgl_lhp,
                      'idskpd' => $data->idskpd,
                      'skpd' => $data->skpd,
                      'idpemeriksa' => $data->idpemeriksa,
                      'pemeriksa' => $data->pemeriksa,
                      'thn_periksa' => $data->thn_periksa,
                      'obyek_periksa' => $data->obyek_periksa,
                      'uraian' => $data->uraian,
                      'idrekomendasi' => $data->idrekomendasi,
                      );
              }
          }
          return $hasil;
      }

  public function tampil_data()
  {
    $query = $this->db->get('skpd');
    return $query;
  }

  public function tampil_pemeriksa()
  {
    $query = $this->db->get('pemeriksa');
    return $query;
  }

  public function listing() {
    $this->db->order_by('id_tlhp','DESC');
    return $this->db->get('tlhp')->result();
  }

  public function listingbsr() {
     return $this->db->get_where('tlhp',array('status'=>'BSR'))-> result();
  }

  public function listingssr() {
    return $this->db->get_where('tlhp',array('status'=>'SSR'))-> result();
  }

  public function validation($mode){
    $this->load->library('form_validation');

    if($mode == "save")
    $this->form_validation->set_rules('no_lhp1', 'no_lhp', 'required');
    $this->form_validation->set_rules('idskpd', 'idskpd', 'required');
    $this->form_validation->set_rules('idpemeriksa', 'idpemeriksa', 'required');
    $this->form_validation->set_rules('tgl_tlhp', 'tgl_tlhp', 'trim|required');
    $this->form_validation->set_rules('ket', 'ket', 'trim|required');
    $this->form_validation->set_rules('nominal', 'nominal', 'trim|required');
    $this->form_validation->set_rules('idrekomendasi', 'idrekomendasi', 'trim|required');


      if($mode == "update")
      $this->form_validation->set_rules('no_lhp', 'no_lhp', 'required');
      $this->form_validation->set_rules('idskpd', 'idskpd', 'required');
      $this->form_validation->set_rules('idpemeriksa', 'idpemeriksa', 'required');
      $this->form_validation->set_rules('idrekomendasi', 'idrekomendasi', 'trim|required');
      $this->form_validation->set_rules('tgl_tlhp', 'tgl_tlhp', 'trim|required');
      $this->form_validation->set_rules('ket', 'ket', 'trim|required');
      $this->form_validation->set_rules('nominal', 'nominal', 'trim|required');
      $this->form_validation->set_rules('status', 'status', 'trim|required');

    if($this->form_validation->run())
      return true;
    else
      return false;
  }
  public function save(){

    $data = array(
      "no_lhp" => $this->input->post('no_lhp1'),
      "idskpd" => $this->input->post('idskpd'),
      "idpemeriksa" => $this->input->post('idpemeriksa'),
      "tgl_tlhp" => $this->input->post('tgl_tlhp'),
      "ket" => $this->input->post('ket'),
      "nominal" => format_num($this->input->post('nominal')),
      "status" => $this->input->post('status'),
      "idrekomendasi" => $this->input->post('idrekomendasi')
      //"filename"=>$msg
    );
    $this->db->insert('tlhp',$data);
}

public function edit($id_tlhp){
  $data = array(
    "no_lhp" => $this->input->post('no_lhp'),
    "idskpd" => $this->input->post('idskpd'),
    "idpemeriksa" => $this->input->post('idpemeriksa'),
    "idrekomendasi" => $this->input->post('idrekomendasi'),
    "tgl_tlhp" => $this->input->post('tgl_tlhp'),
    "ket" => $this->input->post('ket'),
    "nominal" => format_num($this->input->post('nominal')),
    "status" => $this->input->post('status'),
    "idrekomendasi" => $this->input->post('idrekomendasi')
  );

  $this->db->where('id_tlhp', $id_tlhp);
  $this->db->update('tlhp', $data);

  public function delete($id_tlhp){
    $this->db->where('id_tlhp', $id_tlhp);
    $this->db->delete('tlhp');
  }
}

AJAX YANG SAYA GUNAKAN…

var id_tlhp = 0

$(document).ready(function(){


  $('#loading-simpan, #loading-ubah, #loading-hapus, #pesan-error, #pesan-sukses, #btn-reset').hide()

  $('#view').on('click', '.btn-form-ubah', function(){
    id_tlhp = $(this).data('id_tlhp')

    $('#btn-simpan').hide()
    $('#btn-ubah').show()

        $('#modal-title').html('Form Ubah data')

    var tr = $(this).closest('tr')
    var tgl_tlhp = tr.find('.tgl_tlhp').val()
    var ket = tr.find('.ket').val()
    var nominal = tr.find('.nominal').val()
    var status = tr.find('.status').val()
    var no_lhp = tr.find('.no_lhp').val()
    var idskpd = tr.find('.idskpd').val()
    var idpemeriksa = tr.find('.idpemeriksa').val()
    var idrekomendasi = tr.find('.idrekomendasi').val()


    $('#tgl_tlhp').val(tgl_tlhp)
    $('#ket').val(ket)
    $('#nominal').val(nominal)
    $('#status').val(status)
    $('#no_lhp').val(no_lhp)
    $('#idskpd').val(idskpd)
    $('#idpemeriksa').val(idpemeriksa)
    $('#idrekomendasi').val(idrekomendasi)

  })


  $('#view').on('click', '.btn-alert-hapus', function(){
    id_tlhp = $(this).data('id_tlhp')
  })

  $('#btn-tambah').click(function(){
    $('#btn-ubah').hide()
    $('#btn-simpan').show()

        $('#modal-title').html('Form Simpan data')
  })

  $('#btn-simpan').click(function(){
    $('#loading-simpan').show()

    $.ajax({
      url: base_url + 'lhp/simpan',
      type: 'POST',
      data: $("#form-modal form").serialize(),
      dataType: 'json',
      beforeSend: function(e) {
        if(e && e.overrideMimeType) {
          e.overrideMimeType('application/jsoncharset=UTF-8')
        }
      },
      success: function(response){
        $('#loading-simpan').hide()

        if(response.status == 'sukses'){
                    $('#view').html(response.html)

          $('#pesan-sukses').html(response.pesan).fadeIn().delay(10000).fadeOut()

          $('#form-modal').modal('hide')
          document.getElementById("idrekomendasi").value = "";
          document.getElementById("no_lhp").value = "";
          document.getElementById("no_lhp1").value = "";
          document.getElementById("tgl_lhp").value = "";
          document.getElementById("idskpd").value = "";
          document.getElementById("idpemeriksa").value = "";
          document.getElementById("thn_periksa").value = "";
          document.getElementById("obyek_periksa").value = "";
          document.getElementById("uraian").value = "";
          document.getElementById("skpd").value = "";
          document.getElementById("pemeriksa").value = "";
        }else{
          $('#pesan-error').html(response.pesan).show()
        }
      },
      error: function (xhr, ajaxOptions, thrownError) {
        alert(xhr.responseText)
      }
    })
  })

  $('#btn-ubah').click(function(){
    $('#loading-ubah').show() // Munculkan loading ubah

    $.ajax({
      url: base_url + 'viewlhp/ubah/' + id_tlhp,
      type: 'POST',
      data: $("#form-modal form").serialize(),
      dataType: 'json',
      beforeSend: function(e) {
        if(e && e.overrideMimeType) {
          e.overrideMimeType('application/jsoncharset=UTF-8')
        }
      },
      success: function(response){
        $('#loading-ubah').hide()

        if(response.status == 'sukses'){
          $('#view').html(response.html)


          $('#pesan-sukses').html(response.pesan).fadeIn().delay(10000).fadeOut()

          $('#form-modal').modal('hide')
        }else
          $('#pesan-error').html(response.pesan).show()
        }
      }
    })
  })

  $('#btn-hapus').click(function(){
    $('#loading-hapus').show()

    $.ajax({
      url: base_url + 'viewlhp/hapus/' + id_tlhp,
      type: 'GET',
      dataType: 'json',
      beforeSend: function(e) {
        if(e && e.overrideMimeType) {
          e.overrideMimeType('application/jsoncharset=UTF-8')
        }
      },
      success: function(response){
        $('#loading-hapus').hide()

        $('#view').html(response.html)

        $('#pesan-sukses').html(response.pesan).fadeIn().delay(10000).fadeOut()

        $('#delete-modal').modal('hide')
      }
    })
  })

  $('#form-modal').on('hidden.bs.modal', function (e){
    $('#form-modal input, #form-modal select, #form-modal textarea').val('')
  })
})

avatar bgpoels
@bgpoels

35 Kontribusi 2 Poin

Diperbarui 3 tahun yang lalu

2 Jawaban:

tambahkan code ini form_data.append('file', file_data.name) jadi untuk lengkapnya gini <pre> var file_data = $('#gambar').prop('files')[0]; var form_data = new FormData();

form_data.append('file', file_data); // tambahkan kode dibawah ini form_data.append('file', file_data.name) </pre>

avatar rizki4106
@rizki4106

41 Kontribusi 24 Poin

Dipost 3 tahun yang lalu

terimakasih gan solusinya. sudah saya coba dan keluar keterangan seperti ini saat tombol simpan diklik...

you don't have permission to access request object. it is either read-protected or not readable by the server... <pre>

<pre> sementara ini listing di form inputan yang berfungsi untuk simpan gambar ke folder yang ditentukan. &lt;script&gt; $(document).on('click','#btn-simpan',function(e){ e.preventDefault(); var file_data = $('#gambar').prop('files')[0]; var form_data = new FormData();

        form_data.append(&#039;file&#039;, file_data);
        form_data.append(&#039;file&#039;, file_data.name);
        $.ajax({
            url: &#039;&amp;lt;?php echo site_url(&quot;lhp/simpan&quot;) ?&amp;gt;&#039;, // point to server-side PHP script
            dataType: &#039;json&#039;,  // what to expect back from the PHP script, if anything
            cache: false,
            contentType: false,
            processData: false,
            data: form_data,
            type: &#039;post&#039;,
            success: function(data,status){
                //alert(php_script_response); // display response from the PHP script, if any
                if (data.status!=&#039;error&#039;) {
                    $(&#039;#gambar&#039;).val(&#039;&#039;);
                    alert(data.msg);
                }else{
                    alert(data.msg);
                }
            }
        });
    })
&amp;lt;/script&amp;gt;

</pre>mohon dikoreksi gan... ni listing simpan ajax nya yang dipanggil melalui link base_url()

$('#btn-simpan').click(function(){ // Ketika tombol simpan di klik $('#loading-simpan').show() // Munculkan loading simpan

        var file_data = $(&#039;#gambar&#039;).prop(&#039;files&#039;)[0];
        var form_data = new FormData();

        form_data.append(&#039;file&#039;, file_data);
        form_data.append(&#039;file&#039;, file_data.name);
        $.ajax({
            url: &#039;&amp;lt;?php echo site_url(&quot;lhp/simpan&quot;) ?&amp;gt;&#039;, // point to server-side PHP script
            dataType: &#039;json&#039;,  // what to expect back from the PHP script, if anything
            cache: false,
            contentType: false,
            processData: false,
            data: form_data,
            type: &#039;post&#039;,
  beforeSend: function(e) {
    if(e &amp;&amp; e.overrideMimeType) {
      e.overrideMimeType(&#039;application/jsoncharset=UTF-8&#039;)
    }
  },
  success: function(response){ // Ketika proses pengiriman berhasil
    $(&#039;#loading-simpan&#039;).hide() // Sembunyikan loading simpan

    if(response.status == &#039;sukses&#039;){ // Jika Statusnya = sukses
      // Ganti isi dari div view dengan view yang diambil dari proses simpan.php
      $(&#039;#view&#039;).html(response.html)

      /*
      * Ambil pesan suksesnya dan set ke div pesan-sukses
      * Lalu munculkan div pesan-sukes nya
      * Setelah 10 detik, sembunyikan kembali pesan suksesnya
      */
      $(&#039;#pesan-sukses&#039;).html(response.pesan).fadeIn().delay(10000).fadeOut()

      $(&#039;#form-modal&#039;).modal(&#039;hide&#039;) // Close / Tutup Modal Dialog

      // Bersihkan teks saat modal di close
      document.getElementById(&quot;idrekomendasi&quot;).value = &quot;&quot;;
      document.getElementById(&quot;no_lhp&quot;).value = &quot;&quot;;
      document.getElementById(&quot;no_lhp1&quot;).value = &quot;&quot;;
      document.getElementById(&quot;tgl_lhp&quot;).value = &quot;&quot;;
      document.getElementById(&quot;idskpd&quot;).value = &quot;&quot;;
      document.getElementById(&quot;idpemeriksa&quot;).value = &quot;&quot;;
      document.getElementById(&quot;thn_periksa&quot;).value = &quot;&quot;;
      document.getElementById(&quot;obyek_periksa&quot;).value = &quot;&quot;;
      document.getElementById(&quot;uraian&quot;).value = &quot;&quot;;
      document.getElementById(&quot;skpd&quot;).value = &quot;&quot;;
      document.getElementById(&quot;pemeriksa&quot;).value = &quot;&quot;;
    }else{ // Jika statusnya = gagal
      /*
      * Ambil pesan errornya dan set ke div pesan-error
      * Lalu munculkan div pesan-error nya
      */
      $(&#039;#pesan-error&#039;).html(response.pesan).show()
    }
  },
  error: function (xhr, ajaxOptions, thrownError) { // Ketika terjadi error
    alert(xhr.responseText) // munculkan alert
  }
})

}) </pre>

mohon dikoreksi ajax yang saya gunakan, maklum masih dalam tahap belajar dan pemula gan. terimakasih

avatar bgpoels
@bgpoels

35 Kontribusi 2 Poin

Dipost 3 tahun yang lalu

Login untuk ikut Jawaban