Halo teman-teman ini adalah postingan baru tentang tutorial Codeigniter. Pada postingan kali ini kita akan belajar cara upload file gambar di aplikasi framework Codeigniter menggunakan Jquery dengan Ajax tanpa refresh halaman. Saya telah menerima banyak permintaan dari pemirsa saya untuk membuat tutorial tentang cara mengunggah gambar atau file dalam kerangka codeigniter menggunakan Ajax dengan JQuery. Saya telah melihat banyak programmer pemula memiliki masalah untuk mengunggah file atau gambar ke server dengan menggunakan ajax. Untuk mengunggah gambar atau file dengan menggunakan ajax Anda harus memasukkan beberapa kode ke dalam metode ajax Anda. Disini kita akan mengirimkan file data ke server dengan menggunakan form data object. Dengan menggunakan objek ini kita akan mengirimkan file data ke server. Jadi di sini pertama-tama kita memuat file tampilan dari fungsi pengontrol dan membuat formulir pengunggahan gambar dan pada halaman itu kita telah menulis kode ajax dan dalam kode ajax kita telah mengirimkan data file yang dipilih ke server dengan menggunakan objek data formulir. Kemudian setelah dari metode ajax kami telah mengirim permintaan untuk mengunggah file gambar ke server dan di sisi server kami telah memanggil fungsi pengontrol dan dalam fungsi itu kami telah memuat pustaka unggahan dengan konfigurasi seperti jalur gambar yang diunggah dan jenis file gambar yang diizinkan dan memanggil fungsi untuk mengunggah. Jika file gambar diunggah maka akan ditampilkan di halaman web dan jika ada kesalahan saat mengunggah maka kesalahan itu akan ditampilkan di halaman web.
Controllers – main.php
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 | <?php defined('BASEPATH') OR exit('No direct script access allowed'); class Main extends CI_Controller { //functions function image_upload() { $data['title'] = "Upload Image using Ajax JQuery in CodeIgniter"; $this->load->view('image_upload', $data); } function ajax_upload() { if(isset($_FILES["image_file"]["name"])) { $config['upload_path'] = './upload/'; $config['allowed_types'] = 'jpg|jpeg|png|gif'; $this->load->library('upload', $config); if(!$this->upload->do_upload('image_file')) { echo $this->upload->display_errors(); } else { $data = $this->upload->data(); echo '<img src="'.base_url().'upload/'.$data["file_name"].'" width="300" height="225" class="img-thumbnail" />'; } } } } |
Views – image_upload.php
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 | <!DOCTYPE html> <html> <head> <title>Webslesson | <?php echo $title; ?></title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> </head> <body> <div class="container"> <br /><br /><br /> <h3 align="center"><?php echo $title; ?></h3> <form method="post" id="upload_form" align="center" enctype="multipart/form-data"> <input type="file" name="image_file" id="image_file" /> <br /> <br /> <input type="submit" name="upload" id="upload" value="Upload" class="btn btn-info" /> </form> <br /> <br /> <div id="uploaded_image"> </div> </div> </body> </html> <script> $(document).ready(function(){ $('#upload_form').on('submit', function(e){ e.preventDefault(); if($('#image_file').val() == '') { alert("Please Select the File"); } else { $.ajax({ url:"<?php echo base_url(); ?>main/ajax_upload", //base_url() = http://localhost/tutorial/codeigniter method:"POST", data:new FormData(this), contentType: false, cache: false, processData:false, success:function(data) { $('#uploaded_image').html(data); } }); } }); }); </script> |
