Tutorial Cara Preview Gambar Sebelum Diupload

Kadang ada user yang ingin mengupload gambar namun sebelum diproses atau disimpan pada database atau storage server ingin di preview terlebih dahulu. Hal ini mungkin akan sangat bermanfaat jika gambar yang diupload banyak sehingga perlu preview terlebih dahulu.

Di jQuery ada cara yang sangat mudah. Berikut adalah cara melakukannya.

Pertama siapkan file HTML lalu buat seperti ini.

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<input type="file" multiple id="uploadImage">
<div class="div_image"></div>
</body>
</html>

Lalu kita tambahkan javascript seperti kode berikut.

$(function() {
    // Multiple images preview in browser
    var imagesPreview = function(input, placeToInsertImagePreview) {

        if (input.files) {
            var filesAmount = input.files.length;

            for (i = 0; i < filesAmount; i++) {
                var reader = new FileReader();

                reader.onload = function(event) {
                    $($.parseHTML('<img>')).attr('src',event.target.result).appendTo(placeToInsertImagePreview);
                }

                reader.readAsDataURL(input.files[i]);
            }
        }

    };

    $('input#uploadImage').on('change', function() {
        imagesPreview(this, '.div_image');
    });
});

Dan hasilnya bisa temen-temen coba di sini: https://jsfiddle.net/adiputra/4nmLqfxk/2/

Pilih beberapa gambar lalu temen-temen akan melihat gambar langsung di preview.

Menarik ya.

Selamat mencoba Tutorial Cara Preview Gambar Sebelum Diupload 🙂

Membatalkan proses Ajax yang berjalan

Kadang, pada kondisi tertentu ada proses yang ingin dibatalkan ketika mengirim data ajax terlebih dahulu. Sebagai contoh, ketika ajax terlalu lama, user melakukan proses dimana proses bergantung dari proses sebelumnya, jika ini terjadi, error atau ambigu proses pasti terjadi.

Contoh proses lain adalah kita menampilkan kalender, tiap user klik salah satu tanggal, kita proses ajax untuk mengambil data berdasarkan tanggal yang diklik oleh user. Karena mungkin internet yang lama, padahal terdapat proses mengambil data ke belakang dengan ajax, user mengklik sembarang ke tanggal-tanggal lain. Alhasil, proses jadi berantakan, hasil yang diterima dari ajax pun akan ambigu karena ajax bersifat syncronous. Continue reading Membatalkan proses Ajax yang berjalan

jQuery datepicker conflict dengan datepicker bootstrap?

Awalnya saya membuat di menu paling atas datepicker dengan datepicker bootstrap. Lalu karena permintaan klien untuk dibuatkan satu datepicker lagi yang support multiple datepicker, saya gunakan MDP. Alhasil, datepicker bootstrap saya ketimpa dengan code dan style dari MDP. Lalu bagaimana cara solve nya?

MPD diambil dari jquery UI sedangkan datepicker bootstrap lain, tapi karena mereka menggunakan kata “datepicker” yang sama, akhirnya conflict. Cara yang masuk logika adalah, kita ganti saja nama kata “datepicker” salah satu plugin tersebut agar tidak salah panggil. Continue reading jQuery datepicker conflict dengan datepicker bootstrap?

Input focus() hilang selesai panggil kendoWindow

Yang sedang bermain dengan kendo terutama komponen kendoWindow mungkin pernah mengalami keganjilan kode kita di dalam kendoWindow *saya sebut popup kendo*. Di dalam popup kendo, biasa saya tampilkan form popup lalu langsung focus() di salah satu input form. Ini dilakukan untuk efesiensi saja sih, biar user ga pegang mouse lagi untuk mengarahkan ke salah satu input. Continue reading Input focus() hilang selesai panggil kendoWindow

Handle Input Barcode Diakhiri Enter

Ketika bermain dengan barcode scanner, beberapa barcode scanner ketika selesai berhasil baca barcode langsung diakhiri dengan enter. Ini bermasalah ketika kita menyisipkan form hasil baca barcode ke input, sehingga otomatis form akan tersubmit. Pada kondisi ini, mungkin beberapa proses tidak menginginkan “enter” tersebut karena ingin melakukan beberapa proses seperti ajax ke server sebelum form disubmit. Continue reading Handle Input Barcode Diakhiri Enter

Checkbox tidak tampil di Chrome dengan jQuery

Belum lama ada alur yang mesti checkall atau uncheckall beberapa checkbox secara otomatis. Saat itu saya lagi pakai Chrome dan jQuery 1.10.1. Saat di running, entah kenapa tidak muncul saat check all saya click. Saya pikir mungkin versi jQuery 1.10.1 blom fix, Saya upgrade ke 1.10.2, namun tetep saja checkbox tidak muncul. Saya coba inspect, ternyata dalam checkbox attribute checked sudah bernilai benar, true jika checkall, dan false jika uncheckall. Continue reading Checkbox tidak tampil di Chrome dengan jQuery

KendoUI Grid Pada Codeigniter

Sudah saya singgung di artikel lalu saat saya coba mengenalkan KendoUI namun hanya penjelasan teori saja. Kini saya coba akan membagi bagaimana implement salah satu widget / komponen pada KendoUI yaitu Grid dan penerapannya pada Codeigniter. Continue reading KendoUI Grid Pada Codeigniter

Cara membatalkan event select pada jquery ui autocomplete

Bagaimana cara membatalkan value dari hasil proses autocomplete jquery ui ?? Jadi dulu saya ambil data dengan autocomplete milik jquery ui dengan alur, jika hasil yang dipilih user adalah nilai X, saya cek terlebih dahulu apakah nilai X sudah ada pada pilihan sebelumnya ?? Jika sudah ada, batalkan. Jika belum simpan pada text tertentu. Continue reading Cara membatalkan event select pada jquery ui autocomplete

Cara Buat Ajax Agar Mengantri (Queue)

Pernah tidak menganalisis proses ajax ?? Kalau saya analisis, proses ajax itu rebutan jika kita lakukan secara simultan bareng-bareng. Siapa yang cepat, dia masuk duluan. Situasi ini memang wajar, namun beberapa kasus proses ajax ini bermasalah terutama saat network suka putus nyambung, dan ajax bertipe “Cross Domain”. Permasalahan ini akan muncul dan client kamu gak mau tahu bagaimana agar proses get resource dengan ajax berhasil.
Continue reading Cara Buat Ajax Agar Mengantri (Queue)

Gambar Tidak Berubah Saat Di Load Ajax

Belum lama saya ada masalah di koding soal gambar yang kita dapet dari proses ajax dan disimpan di server lalu ditampilkan di halaman depan secara dinamik. Saat dijalankan dengan Chrome, si gambar muncul dengan baik, sesuai gambar terakhir dari response si ajax. Namun berbeda ketika dijalankan di firefox, gambar tidak berubah, tidak diganti dari gambar terakhir hasil response si ajax. Continue reading Gambar Tidak Berubah Saat Di Load Ajax

Setting JCrop pada Codeigniter

Bagaimana cara setting jCrop pada Codeigniter. eh jCrop itu apa ya ? jcrop adalah plugin jQuery powerfull yang berguna untuk melakukan Cropping atau pemotongan gambar sesuai yang kita inginkan. Setiap Photo Editor kayak PhotoShop, Paint, PhotoScape pasti ada fitur untuk meng-crop gambar sesuai yang kita mau. Kasus yang mungkin teman-teman lihat adalah pada Facebook ya.. Continue reading Setting JCrop pada Codeigniter

Pengenalan jQuery Api Live

Web tidak lepas dengan namanya event, di klik, di mouseover, mouseleave, onchange dan banyak lagi event pada web. Penanganan event pada web harus jadi point plus bagi seorang web developer. Pada artikel ini saya ingin share mengenai penanganan event dengan api jquery live(). Apa bedanya penanganan event dengan api bind() dengan api live(), akan saya jelaskan pada artikel ini. Continue reading Pengenalan jQuery Api Live