cara upload gambar agar tidak reload page pada jquery ajax

permisi para mastah...

saya mau bertanya bagaimana cara nya agar pada saat upload gambar dan insert data dia tidak reload page atau tidak merefresh halaman dengan menggunakan jquery ajax php...

saya sudah buat codingan html nya

<table>
          <form class="form" action="data_penjualan_buku.php" method="post" enctype="multipart/form-data">
            <tr>
              <td>Judul Buku</td>
              <td><input type="text" name="judul" value="" placeholder="Judul" id="judul"></td>
            </tr>

            <tr>
              <td>ISBN</td>
              <td><input type="text" name="isbn" value="" placeholder="No. ISBN" id="isbn"></td>
            </tr>

            <tr>
              <td>Penulis</td>
              <td><input type="text" name="penulis" value="" placeholder="Penulis" id="penulis"></td>
            </tr>

            <tr>
              <td>Penerbit</td>
              <td><input type="text" name="penerbit" value="" placeholder="Penerbit" id="penerbit"></td>
            </tr>

            <tr>
              <td>Tanggal Terbit</td>
              <td><input type="text" name="terbit" value="" placeholder="Tanggal Terbit" id="terbit"></td>
            </tr>

            <tr>
              <td>Jumlah Halaman</td>
              <td><input type="text" name="hal" value="" placeholder="Jumlah Halaman" id="jml_hal"></td>
            </tr>

            <tr>
              <td>Berat Buku</td>
              <td><input type="text" name="berat" value="" placeholder="Berat Buku" id="berat_buku"></td>
            </tr>

            <tr>
              <td>Jenis Cover</td>
              <td><input type="text" name="jenis" value="" placeholder="Jenis Cover" id="jenis"></td>
            </tr>

            <tr>
              <td>Dimensi</td>
              <td><input type="text" name="dimensi" value="" placeholder="Dimensi" id="dimensi"></td>
            </tr>

            <tr>
              <td>Kategori</td>
              <td>
                <select class="kategori" name="kategori">
                  <option value="Pelajaran">Pelajaran</option>
                  <option value="Teknologi">Teknologi</option>
                </select>
              </td>
            </tr>

            <tr>
              <td>Bonus</td>
              <td><input type="text" name="bonus" value="" placeholder="Bonus Dalam Buku" id="bonus"></td>
            </tr>

            <tr>
              <td>Text Bahasa</td>
              <td><input type="text" name="bahasa" value="" placeholder="Text Bahasa" id="bahasa"></td>
            </tr>

            <tr>
              <td>Stock</td>
              <td>
                <select class="stock" name="stock">
                  <option value="Stock Tersedia">Tersedia</option>
                  <option value="Stock di Gudang Suplier">Suplier</option>
                  <option value="Stock Akan Tersedia">Akan Tersedia</option>
                </select>
              </td>
            </tr>

            <tr>
              <td>Harga</td>
              <td><input type="text" name="harga" value="" placeholder="Harga" id="harga"></td>
            </tr>

            <tr>
              <td>Harga Baru</td>
              <td><input type="text" name="baru" value="" placeholder="Harga Baru" id="harga_baru"></td>
            </tr>

            <tr>
              <td>Hemat</td>
              <td><input type="text" name="hemat" value="" placeholder="Hemat Harga" id="hemat"></td>
            </tr>

            <tr>
              <td>Gambar</td>
              <td>
                <div class="image">
                  <label for="file" class="upload-plus"><i class="fa fa-plus-circle fa-2x" aria-hidden="true"></i></label>
                  <input type="file" name="file" id="file" />
                </div>
              </td>
            </tr>

            <tr>
              <td>Sinopsis</td>
              <td><textarea name="sinopsis" rows="8" cols="40" placeholder="Sinopsis Buku" id="sinopsis"></textarea></td>
            </tr>

            <tr>
              <td></td>
              <td><input type="submit" name="submit" value="Selesai" id="selesai"></td>
            </tr>
          </form>
        </table>

dan yang ini codingan jquery ajax nya

$('#selesai').on('click', function(){

    var judul     = $('#judul').val();
    var isbn      = $('#isbn').val();
    var penulis   = $('#penulis').val();
    var penerbit  = $('#penerbit').val();
    var terbit    = $('#terbit').val();
    var halaman   = $('#jml_hal').val();
    var berat     = $('#berat_buku').val();
    var jenis     = $('#jenis').val();
    var dimensi   = $('#dimensi').val();
    var kategori  = $('.kategori').val();
    var bonus     = $('#bonus').val();
    var bahasa    = $('#bahasa').val();
    var stock     = $('.stock').val();
    var harga     = $('#harga').val();
    var baru      = $('#harga_baru').val();
    var hemat     = $('#hemat').val();
    var data  = new FormData(this);
    data.append('file',$(file)[0].files[0]);
    //var sinopsis  = $('#sinopsis').val();

    $.ajax({
      url: "data_penjualan_buku.php",
      type: "POST",
      cache: false,
      contentType: false,
      processData: false,
      data: {data,judul:judul,isbn:isbn,penulis:penulis,penerbit:penerbit,terbit:terbit,hal:halaman,berat:berat,jenis:jenis,dimensi:dimensi,kategori:kategori,bonus:bonus,bahasa:bahasa,stock:stock,harga:harga,baru:baru,hemat:hemat},
      success: function(data){
        alert(data);
      }
    });
  });

mohon bantuan nya para mastah.. terima kasih.

avatar BadRabbit
@BadRabbit

149 Kontribusi 56 Poin

Diperbarui 7 tahun yang lalu

14 Jawaban:

coba tes gini gan:

......
var data  = new FormData(this); // silahkan komentari dulu baris ini
data.append('file',$(file)[0].files[0]); // ini juga

$.ajax({
   method      : 'post',
   url         : url, // silahkan disesuaikan
   data        : new FormData($("#id_formnya")[0]), // silahkan disesuaikan id_formnya
   dataType    : 'json',
   async       : true,
   processData : false,
   contentType : false

   ......
});

avatar onirusama
@onirusama

265 Kontribusi 184 Poin

Dipost 7 tahun yang lalu

berhasil ngirim data nya ke database tetapi masih tetep reload page gan..

avatar BadRabbit
@BadRabbit

149 Kontribusi 56 Poin

Dipost 7 tahun yang lalu

// EDIT silahkan prevent default form submitnya.

$('#selesai').on('click', function(){
   // tambahkan
   $("#form_agan").submit(function(e){ // silahkan sesuaikan formnya
       e.preventDefault();
   });

   ......

avatar onirusama
@onirusama

265 Kontribusi 184 Poin

Dipost 7 tahun yang lalu

masih reload page gan..

avatar BadRabbit
@BadRabbit

149 Kontribusi 56 Poin

Dipost 7 tahun yang lalu

tes kembali gan di atas jawabannya saya edit kembali.

avatar onirusama
@onirusama

265 Kontribusi 184 Poin

Dipost 7 tahun yang lalu

masih tetep ngereload gan page nya..

avatar BadRabbit
@BadRabbit

149 Kontribusi 56 Poin

Dipost 7 tahun yang lalu

hahaha. ok dah kita ambil jalan lain aja, biar lebih mudah rada2 g fokus gan. silahkan nanti dicari lebih lanjut mengenai prevent default submit form ganti aja input submitnya menjadi div atau span

<td><input type="submit" name="submit" value="Selesai" id="selesai"></td>

//ganti jadi

<td><span id="selesai">Selesai</span></td>

avatar onirusama
@onirusama

265 Kontribusi 184 Poin

Dipost 7 tahun yang lalu

hehehe iyak gan ane coba dulu..

avatar BadRabbit
@BadRabbit

149 Kontribusi 56 Poin

Dipost 7 tahun yang lalu

oh iyak ane lupa bilang...

makasih gan udah mau bantuin ane...hehe

avatar BadRabbit
@BadRabbit

149 Kontribusi 56 Poin

Dipost 7 tahun yang lalu

yoi gan sama2 sy juga masih belajar: oh iya ini untuk kalau agan masih mau tetap pakai input submit yang tadi dan lakukan prevent default: 1. acuhkan tadi rubah baris input submitnya kembalikan seperti punya agan 2. selanjutnya ganti event listening pada on klik tombolnya menjadi event listening formnya hasilnya:

$('#selesai').on('click', function(){ // event listening ini kita ganti sebagai berikut
   // kode agan
});

ini pergantiannya:

$('#form_agan').submit(function(e){
   // kode agan
   e.preventDefault();
});

avatar onirusama
@onirusama

265 Kontribusi 184 Poin

Dipost 7 tahun yang lalu

hasilnya berhasil gan kirim data ke database nya tetapi masih tetep reload page nya gan...

avatar BadRabbit
@BadRabbit

149 Kontribusi 56 Poin

Dipost 7 tahun yang lalu

coba modifikasi jadi kayak gini:

$(document).on('submit', '#form_agan', function(e){
   e.preventDefault();
   // kode agan
   .....
});

avatar onirusama
@onirusama

265 Kontribusi 184 Poin

Dipost 7 tahun yang lalu

masih reload page gan...

avatar BadRabbit
@BadRabbit

149 Kontribusi 56 Poin

Dipost 7 tahun yang lalu

Jawaban Terpilih

ntah kenapa kemarin saya coba codingan ajax nya kaya gini tidak berhasil berhasil.... kemudian saya coba lagi hari ini Ternyata berhasil gan caranya biar pada saat upload file dia tidak reload / refresh halaman nya..

$(document).on('submit', '#form_agan', function(e){
   e.preventDefault();
   // kode agan
   .....
});

terima kasih gan @onirusama...

avatar BadRabbit
@BadRabbit

149 Kontribusi 56 Poin

Dipost 7 tahun yang lalu

Login untuk ikut Jawaban