• Login
  • Join
  • Home
  • Profil
  • Cara Pembelian
  • Kontak

logo

  • Home
  • Kategori Tutorial
    • Ajax - JQuery
    • API Developer
    • CakePHP
    • CodeIgniter
    • HTML & CSS
    • Lain-lain
    • MySQL - MySQLi
    • OOP PHP
    • PHP Classic
    • Smarty PHP
    • SMS Gateway
    • Version Control
  • Download
  • My Books
  • Prosedur Penulisan Naskah
  • Toko Online
  • My Sites
    • Asfamedia.com
    • Asfasolution.com
    • Komiqu.com
Home
  • Home
  • Login
  • Join
  • Kategori Tutorial
    • Ajax - JQuery
    • API Developer
    • CakePHP
    • CodeIgniter
    • HTML & CSS
    • Lain-lain
    • MySQL - MySQLi
    • OOP PHP
    • PHP Classic
    • Smarty PHP
    • SMS Gateway
    • Version Control
  • Download
  • Info Buku
  • Prosedur Penulisan Naskah
  • Toko Online
  • My Sites
    • Asfamedia.com
    • Asfasolution.com
    • Oaseast.com
  • Pembelian online saat ini dialihkan ke www.asfamedia.com
  • Dapatkan diskon hingga 40% dengan bergabung sebagai member di asfamedia.com (Khusus buku-buku penerbit CV. ASFA Solution)
  • Segera daftarkan email Anda di newsletter melalui right column untuk mendapatkan informasi terbaru agussaputra.com
  • Artikel dan informasi yang ditampilkan bisa Anda copy, dengan catatan: menuliskan sumber : agussaputra.com
  • Home
  • Artikel
  • Upload Gambar Menggunakan Ajax (jQuery)

Upload Gambar Menggunakan Ajax (jQuery)

27 September 2011
21   
20.761

Upload Gambar Menggunakan Ajax (jQuery)

Sesuai permintaan dari Pengunjung Web Setia yang meminta untuk share mengenai Upload Images menggunakan Teknik Ajax.. kali ini penulis akan membahas mengenai teknik tersebut.. apa sih yang dimaksud mengenai Ajax??.. Ajax merupakan suatu teknik bahkan mungkin saat ini sudah menjadi teknik wajib yang harus digunakan dalam membangun suatu website Modern (Web 2.0).. Mengapa?.. karena dengan Ajax, segala permintaan (request) akan terjadi di belakang layar, dimana seluruh aksi akan secara responsif dilakukan, tanpa harus me-load web browser, terlebih lagi itu adalah Upload Gambar, dimana jika kita memasukkan data yang memiliki FileSize cukup besar, akan semakin lambat bukan?.. untuk itu ini dia solusinya..

Buat Form dengan nama form_upload.php, isinya sebagai berikut:

<span style="font-family: courier new,courier;"><!-- Form Upload -->
<iframe id="upload-frame" name="upload-frame" style="display:none;"></iframe>&nbsp; </span>

<form action="upload.php" enctype="multipart/form-data" method="post" name="formupload" onsubmit="startUpload();" target="upload-frame">&nbsp;
Picture : <input name="picture" type="file" /><input name="upload" type="submit" value="Upload" />&nbsp;</form>
<br />
<br />
<!-- Tampilkan Gambar -->

<div id="uploaded-picture">&nbsp;</div>
&nbsp;<br />
<br />
<!-- Load jQuery.js --><br />
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
<!-- Start Upload -->
    function startUpload(){
        $("#uploaded-picture").html("loading...");
    }
    
    function displayPicture(pictureUrl){
        var img = new Image();
        $(img).load(function(){
            $(this).hide();
             $("#uploaded-picture").html($(this));
            $(this).fadeIn();
        }).attr('src', pictureUrl).error(function(){
            alert("gagal menampilkan gambar");
        });
</script>


Buat file upload.php (sebagai aksi proses), isinya sebagai berikut:

<?php
$fileName = $_FILES[‘picture’][‘name’];
$fileSize = $_FILES[‘picture’][‘size’];
$fileError = $_FILES[‘picture’][‘error’];
$success = false;


if($fileSize > 0 || $fileError == 0){
    $move = move_uploaded_file($_FILES[‘picture’][‘tmp_name’], “images/“.$fileName); //Simpan ke folder images
    if($move){
        $success = true;
    }
}

echo “<script type=‘text/javascript’>
        if($success){
            echo "parent.displayPicture('images/$fileName');";
        }
        else{
            echo "alert('Upload gagal $fileError');";
        }
    </script>”;


Langkah terakhir, buat folder images untuk menampung file-file gambar yang di-upload and jangan lupa untuk me-load file JavaScript jquery.js.. btw, file JavaScript nya dimana?.. untuk lebih mudah dan singkat, seluruh Source nya telah penulis sertakan.. dapat Anda download di http://www.ziddu.com/download/17869730/UploadMenggunakanAjax.rar.html

Semoga tutorial ini dapat memberikan manfaat yang sebesar-besarnya bagi Anda.

recommend to friends
  • twitter

Artikel Terkait

Tampil data WOW! menggunakan DataTable Plugin

Tampil data WOW! menggunakan DataTable Plugin

20-02-2013 0
Launching Web Mobile Ver 2.0. - jQuery Mobile

Launching Web Mobile Ver 2.0. - jQuery Mobile

26-06-2012 0
Pencarian 2 Periode (Awal - Akhir) Menggunakan DatePicker jQuery

Pencarian 2 Periode (Awal - Akhir) Menggunakan DatePicker jQuery

02-05-2011 0

Komentar

  1. edi
    27-09-2011, 09:52:31

    mantab.. ini dia yg dicari-cari. thx mas agus.. tutorial dan buku2 nya sangat bermanfaat..

  2. izar
    27-09-2011, 14:41:39

    thanks bro.... mas agus ceritain dikit dong alur scriptnye, makasih

  3. idham
    27-09-2011, 17:56:01

    Thank sangat bermanfaat.

  4. Agus Saputra
    28-09-2011, 08:25:21

    edi & idham @ mantab...

    izar @ alurnya sbb:
    pertama,
    yang jelas menampilkan form terlebih dahulu
    <form onsubmit="startUpload();" action=upload.php> = function startUpload()

    jadi ketika form tersebut kita klik (submit), maka function startUpload akan bekerja, dimana didalamnya ada kalimat "Loading"..

    untuk perintah displayPicture, digunakan untuk menampilkan gambar yang telah di-upload.

    pada upload.php (proses aksi)..
    $_FILES['picture']xx = merupakan parameter untuk upload file.
    if($fileSize > 0 = jika file size nya lebih dari 0, maka akan dilakukan pemindahan (move_uploaded_file..

    nah, skrip dibawahnya (javascript),
    jika upload selesai, maka gambar akan langsung ditampilkan, namun jika gagal akan ditampilkan pesan "Upload gagal xx"..

  5. lahas
    07-11-2011, 23:10:03

    Mas Agus matur nuwun pituduh-e,,
    kalo bisa ditambah lagi,, upload file pake ajax,, nyimpen nya jangan di file system,, tapi database,, pake tipe blob,, yang mirip gmail attachment itu mas,,

    aku nyari gak ketemu-ketemu,,

    :-)

  6. Agus Saputra
    08-11-2011, 08:06:57

    lahas @ oce mas.. saya tampung dulu yah .. ^^

  7. Novian Agung
    09-05-2012, 23:31:35

    Mana pemanggilan fungsi ajax-nya om? Itu kan cuma pakai iframe dan JQuery hanya difungsikan sebagai pemanggil link gambar untuk ditampilkan.

    Begini seharusnya ajax: http://www.diajar.com/membuat-pengunggah-uploader/

  8. AJUN
    20-09-2012, 11:42:18

    Mas Agus, bagaimana jika saya hanya ingin menampilkan tidak gambarnya saja, tapi keterangan nama file yang saya upload.
    Terimakasih

  9. Ahndan
    09-02-2013, 14:19:05

    @lahas : Kalo yg pakai tipe BLOB kaya gini :
    1. Buat file form_upload.php :
    <form enctype="multipart/form-data" action="upload_gambar.php" method="post">
    Nama Image <input name="title" type="text" /><p>
    Pilih Image <input type="hidden" name="MAX_FILE_SIZE" value="3000000" />
    <input name="image" type="file" />
    <p><input type="submit" name="submit" value="Submit" />
    </form>

    2.Lalu file upload.php
    <?php
    $tmpName = $_FILES['image']['tmp_name'];
    $title = $_POST['title'];
    $fp = fopen($tmpName, 'r');
    $dataimage = fread($fp, filesize($tmpName));
    $dataimage = addslashes($dataimage);
    fclose($fp);

    // koneksi ke dalam database
    mysql_connect('localhost',' ;root','');
    mysql_select_db(' db_gambar');

    //menyimpan ke dalam db
    $query = "INSERT INTO image(title, image) VALUES ('$title', '$dataimage')";
    $hasil = mysql_query($query);
    if ($hasil) echo "Berhasil Di Upload";
    else echo "Gagal! Coba Lagi";
    ?>

    3. Untuk struktur data di mysql :
    A. Nama DB : db_gambar
    B. create table image (
    id int(11) auto_increment primary key,
    title varchar(40) not null,
    image longblob not null
    );

    Mudah2an membantu semua

  10. Reza
    27-04-2013, 14:39:45

    kalau menampilkan gambar dengan slide show, kemudian gambar didalam slide show itu bisa dihapus, gimana cara bkinnya mas agus,,

  11. herwin
    10-07-2013, 15:45:52

    hadeh dah lama ditunggu akhirnya ketemu juga script na, thanks mas agus. piye kabare mas agus..??

  12. baba
    13-07-2013, 22:47:33

    bababababababababbababaabab

  13. baba
    13-07-2013, 22:49:20

    babibubebobabonba

  14. panji
    22-09-2013, 17:52:41

    terimakasih mas...

  15. Dannie
    26-01-2014, 12:49:12

    Gan kalo mau ngatus ukuran gambar yang tampil gimana..?
    itu kan setelah terupload, gmabar langsung ditampilkan. Nah, kalo gambarnya berukuran 1000x1000 misalnya yg nongol ya gede banget gan..
    Gimana biar gambarnya bisa diatus ukuran tampilnya gan?

  16. Obat herbal asma
    02-02-2014, 06:53:45

    artikel bermanfaat dan menarik sekali
    http://obatherbalasmagoldg.wordpress.com

  17. Chimikofu
    26-10-2014, 00:48:34

    Gak ada demo nya ya gan?
    Thank's

  18. Agus Saputra
    27-10-2014, 00:51:18

    Chimikufu @ Kan sudah saya sediakan link download nya diatas?.. :)

  19. Distributor Area
    06-01-2015, 00:58:58

    Terima kasih atas infonya
    Kunjungi web ane ya www.haloniaga.com dan www.distributorarea.com

  20. [email protected]
    15-03-2016, 23:48:24

    Gan bagus nih, tapi ane cob kok notice:
    Notice: Undefined index: picture in C:\xampp\htdocs\upload\upload.php on line 2

    Notice: Undefined index: picture in C:\xampp\htdocs\upload\upload.php on line 3

    Notice: Undefined index: picture in C:\xampp\htdocs\upload\upload.php on line 4

    Notice: Undefined index: picture in C:\xampp\htdocs\upload\upload.php on line 8

  21. dany
    11-05-2016, 12:51:01

    maaf pa , kalo mau upload sama nampilinya pake smarty php gmna caranya , sama ajah ga? terima kasih

Tinggalkan Komentar


Lihat Semua

Buku Terbaruku

Panduan Praktis dan Jitu Menguasai PHP7 dan SQL Server 2017
Panduan Praktis dan Jitu Menguasai PHP7 dan SQL Server 2017

Like Our Page

Agus Saputra
CV. ASFA Solution

Terpopuler Saat Ini

  • Artikel Terpopuler
  • Buku Terpopuler
(73.743)

Mengubah +62 menjadi 0 dan 0 menjadi +62 - SMS

(60.130)

Membuat Laporan PDF PHP Berdasarkan Kondisi

(50.868)

Sebab Gammu Error 1053

(39.042)

Telah Terbit Buku Best Practice Membangun Aplikasi Pelayanan Publik dengan Framework Codeigniter 3

(37.586)

Import Excel to Database Menggunakan PHP dengan Filtering Data Besyarat

(35.808)

Membuat Menu Tree Sendiri

(34.394)

Membuat Statistika Pengunjung Secara Dinamis

(22.399)

Memanfaatkan SMS API secara Online dengan PHP

(20.760)

Upload Gambar Menggunakan Ajax (jQuery)

(18.893)

Step By Step Membangun Aplikasi SMS dengan PHP dan MySQL

(21.157)

Framework Codeigniter 3 Membangun Aplikasi Penggajian untuk Panduan Skripsi
by Yenda Purbadian

(19.226)

Membuat Aplikasi Absensi Dan Kuesioner Untuk Panduan Skripsi
by Agus Saputra

(18.498)

Proyek Membuat Aplikasi Forum Diskusi Dengan PHP Dan MySQL
by Agus Saputra

(18.050)

Aplikasi Penjualan Dan Pembelian Terintegrasi Dengan VB 6.0. Dan Data Report
by Agus Saputra, Sofyan Maulana, & Sutikno Sofjan

(16.677)

Trik Dahsyat Menjadi Web Master Dengan Framework CakePHP
by Agus Saputra

(16.185)

Aplikasi Pemesanan Tiket Online Berbasis Web Dan Android
by Akhmad Dharma Kasman

(15.644)

Membangun Aplikasi Toko Online Dengan PHP Dan SQL Server
by Agus Saputra

(14.631)

Mega Proyek 125 Juta Sistem Informasi Akademik Kampus
by Agus Saputra

(14.329)

Sistem Informasi Nilai Akademik Untuk Panduan Skripsi
by Agus Saputra

(14.315)

Teknik Cepat Membangun Aplikasi Web Dengan Framework CakePHP
by Agus Saputra

Newsletter

Masukkan email Anda untuk berlangganan informasi kami

Komentar Artikel Terakhir

  • AGUS SAPUTRA pada
    MySQL Deprecated? Bagaimana Jika Sudah Terlanjur Menggunakan?
    04 April 2020 23:36:33
  • Lpk Naura pada
    MySQL Deprecated? Bagaimana Jika Sudah Terlanjur Menggunakan?
    03 April 2020 01:43:24
  • Lpk Naura pada
    Mengirim Email Otomatis dengan Cron Jobs
    03 April 2020 01:41:33
  • Lpk Naura pada
    Mengirim Email Otomatis dengan Cron Jobs
    03 April 2020 01:40:29
  • Didik pada
    Update Source Code Final Project POS Web Base dengan Smarty PHP
    25 Februari 2020 05:46:58

Komentar Buku Terakhir

  • Hijau Generasi pada
    Mengenal Web Security - Kasus Eksploitasi Web dengan Ajax
    28 Maret 2020 21:59:10
  • y. ifliandry pada
    Mega Proyek 75 Juta Aplikasi Inventory Berbasis Web
    20 Maret 2020 03:08:36
  • Subarja Yasin pada
    Mega Proyek 125 Juta Sistem Informasi Akademik Kampus
    06 Februari 2020 09:43:44
  • Fedri pada
    Proyek Membuat Website Periklanan Dengan PHP
    05 Januari 2020 18:09:17
  • er pada
    Proyek Membuat Aplikasi Forum Diskusi Dengan PHP Dan MySQL
    09 Desember 2019 09:09:27
  • Home
  • Cara Pembelian
  • Kontak
© 2023. All Rights Reserved. CV. ASFA Solution, Software Development, IT and Publishing
×
Authorization
Login
Login menggunakan jejaring sosial
Anda juga masuk menggunakan akun facebook Anda.
  • Connect
×
JOIN AGUSSAPUTRA.COM
* All fields required