Postingan lainnya
modal untuk upload image
Salam kenal para master Codeigniter Indonesia. Saya baru belajar codeigniter dan untuk latihan kasus saya buat aplikasi, didalam aplikasi tsb ada fitur upload image dengan menggunakan form_open_multipart yang terdapat dalam modal. Kendala yang saya hadapi adalah: Ketika form_open_multipart tidak di beri attribut id, contoh:(<?php echo form_open_multipart('berita/insert')?>) maka proses upload dan simpan data berjalan normal walaupun ada sedikit masalah tp bila form_open_multipart di beri attribut id,contoh:(<?php echo form_open_multipart('berita/insert',array('id'=>'berita_add'))?>) maka muncul error "no image file selected" dan tidak melakukan proses upload maupun simpan data, dibawah saya sertakan sedikit codingan yang sudah saya terapkan: //**view**//
<?php
defined('BASEPATH') OR exit('No direct script access allowed');?>
<div class="modal fade mymod" id="add_berita" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Tambah Data Berita</h4>
</div>
<div class="modal-body">
<div id="pesan_add"></div>
<?php echo form_open_multipart('berita/insert',array('id'=>'berita_add'));?>
<input type="hidden" name="current_url" value="<?php echo current_url(); ?>">
<span>Lampiran</span>
<div class="panel panel-default">
<!--UPLOAD IMAGE PREVIEW-->
<div class="panel-body text-center">
<img class="img-responsive" src="<?php echo base_url() ?>property/default_attachment.png" alt="Attachment" id="image-preview" style="height:250px; widht:100%;">
</div>
<!--UPLOAD IMAGE FILE PICKER-->
<div class="panel-footer">
<input type="file" id="attachment" name="attachment" onchange="previewImage();" class="input" />
</div>
</div>
<!--JUDUL BERITA-->
<div class="input-group">
<span class="input-group-addon" id="basic-addon1">Judul</span>
<input type="text" class="form-control" placeholder="Judul Berita" aria-describedby="basic-addon1" style="text-transform:uppercase" name="judul" id="judul">
</div>
<br>
<!--ISI BERITA-->
<div class="input-group">
<span class="input-group-addon" id="basic-addon1">Isi</span>
<input type="text" class="form-control" placeholder="Isi Berita" aria-describedby="basic-addon1" style="text-transform:uppercase" name="isi" id="isi">
</div>
<br>
<button type="submit" class="btn btn-success pull-right">Simpan</button>
<br>
<br>
<?php echo form_close(); ?>
</div>
</div>
</div>
</div>
//**JS**//
$('#berita_add').on('submit', function (e) {
e.preventDefault();
$form = $(this);
curr_url = $('[name=current_url]').val();
formdata = $(this).serialize();
console.log(formdata);
$.post(
$form.attr('action'),
formdata + '&csrf_qwerty=' + csrf_token,
function (r) {
res = $.parseJSON(r);
if (res.kode == 0) {
$('#pesan_add').html(res.pesansaya);
} else {
window.location = curr_url + '?msg=' + res.kode;
}
});
}
);
//**Controller**//
public function validasi_input(){
if(empty($_FILES['attachment']['name'])){
$this->form_validation->set_rules('attachment', 'Lampiran','required|trim|xss_clean');
}
$this->form_validation->set_rules('judul', 'Judul','trim|required|min_length[1]|max_length[50]');
$this->form_validation->set_rules('isi', 'Isi','trim|required|min_length[1]|max_length[100]');
}
public function berita_upload_config(){
$config['upload_path'] = 'uploads/berita';
$config['allowed_types'] = 'jpg|jpeg|png|gif|bmp';
$config['encrypt_name'] = TRUE;
$config['max_size'] = '48000';
$config['max_height'] = '5000';
$config['max_width'] = '5000';
$config['file_name'] = 'berita-'.time();
$this->load->library('upload', $config);
$this->upload->initialize($config);
}
public function insert(){
$kode = $this->buat_kode();
$now = date('Y-m-d H:i:s');
$user_id = '111111';
$this->validasi_input();
if(count($_POST)!=0){
if($this->form_validation->run()==true){
$kode_ada = $this->m_berita->periksa_kode($kode);
if($kode_ada!=0){
$kode = $this->buat_kode();
}else{
$this->berita_upload_config();
$att_berita = 'attachment';
if($this->upload->do_upload($att_berita)){
$file = $this->upload->data();
$nama_file = $file['file_name'];
$uk_file = $file['file_size'];
if(!$uk_file<500){
$this->resize_config($nama_file);
}
$data['id'] = intval($kode);
$data['judul'] = $this->input->post('judul');
$data['isi'] = $this->input->post('isi');
$data['gambar'] = $nama_file;
$data['created_at'] = $now;
$data['created_by'] = $user_id;
$data['updated_at'] = $now;
$data['updated_by'] = $user_id;
$simpan=$this->m_berita->insert($data);
if($simpan){
echo json_encode(array('kode'=>1));
}else{
echo json_encode(array('kode'=>2));
}
}else{
$error = array('error' => $this->upload->display_errors());
echo $error;
}
}
}else{
echo json_encode(array('kode'=>0,'pesansaya'=>validation_errors()));
}
}else{
echo json_encode(array('kode'=>0,'pesansaya'=>validation_errors()));
}
}
Barangkali agan-agan bisa bantu dan kasih tau dimana kesalahan coding saya. Terima kasih
5 Jawaban:
Di file JS-nya, isi log dari "formdata" ada inputan file-nya ga?
log dari "formdata" nya seperti ini : csrf_qwerty=efcbdca8ac2ee1a04de9434d7586a064¤t_url=http%3A%2F%2Flocalhost%2Fberita&judul=sad&isi=sad
kalau mau submit file jangan pakai serialize gan. serialize ga bisa baca file attachment, pakai FormData.
ini saya ilustrasikan kode agan di fiddle dengan metode serialize dan FormData, bisa dilihat sendiri bedanya. [link]https://jsfiddle.net/3gsy6LLu/[/link]
lebih jelas tentang FormData https://developer.mozilla.org/en-US/docs/Web/API/FormData/FormData
dapet dikit pencerahan setelah baca di https://stackoverflow.com/questions/14415457/submit-a-form-with-jquery-serialize-in-code-igniter dengan metode berbeda,moga dapet membantu yang laen.
$.ajax({
url : $("#berita_add").attr('action'),
dataType : 'json',
type : 'post',
data : formdata,
contentType : false,
processData : false,
success: function(resp) {
$.getJSON(resp);
if (resp.kode == 0) {
$('#pesan_add').html(resp.pesansaya);
} else {
window.location = curr_url + '?msg=' + resp.kode;
}
}
});
thanks,udah membantu