Hallo! Selamat Datang di Marketplace produk digital, Freelancer terbaik di indonesia (67422 Members, 783 Products, 5280 Topic, 12953 Comments)

Upload Gambar via Camera by Webcamjs, into folder and database mysql

Dibuat
Login Terakhir 4 Bulan lalu,
Telah Dilihat 2871 Kali
aanlavista Mengatakan : Sultan Account
  1. Assalamualaikum Warahmatullahi Wabarakatuh...
  2.  
  3. Halo, first time posting, mohon bantuannya para mastah khususon om robby,
  4. seperti judul, gambar yang diambil dari kamera sudah berhasil masuk folder dan database,
  5. tapi ada masalah pada hasil gambar, tidak bisa dibuka alias empty / 0Bytes
  6.  
  7. ini javascriptnya
  8.  
  9. <!-- jquery -->
  10. <script src="https://code.jquery.com/jquery-3.5.1.js" integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script>
  11. <!-- webcamjs -->
  12. <script src="webcamjs/webcam.min.js"></script>
  13. <script language="JavaScript">
  14. // menampilkan kamera dengan menentukan ukuran, format dan kualitas
  15. Webcam.set({
  16. width: 240,
  17. height: 320,
  18. image_format: 'png',
  19. jpeg_quality: 90
  20. });
  21. Webcam.set('constraints',{
  22. facingMode: "environment"
  23. });
  24. //menampilkan webcam di dalam file html dengan id my_camera
  25. Webcam.attach('#my_camera');
  26. </script>
  27.  
  28. <script type="text/javascript">
  29. // saat dokumen selesai dibuat jalankan fungsi update
  30. $(document).ready(function () {
  31. update();
  32. });
  33. // jalankan aksi saat tombol register disubmit
  34. $(".tombol-simpan").click(function () {
  35. event.preventDefault();
  36. // membuat variabel image
  37. var image = '';
  38. //mengambil data uername dari form di atas dengan id name
  39. var nama_produk = $('#nama_produk').val();
  40. //mengambil data uername dari form di atas dengan id name
  41. var harga = $('#harga').val();
  42. //mengambil data uername dari form di atas dengan id name
  43. var stok = $('#stok').val();
  44. //mengambil data uername dari form di atas dengan id name
  45. var detail_produk = $('#detail_produk').val();
  46. //mengambil data uername dari form di atas dengan id name
  47. var kategori = $('#kategori').val();
  48. //mengambil data uername dari form di atas dengan id name
  49. var nama_kedai = $('#nama_kedai').val();
  50. //mengambil data uername dari form di atas dengan id name
  51. var tanggal_input = $('#tanggal_input').val();
  52. //memasukkan data gambar ke dalam variabel image
  53. Webcam.snap(function (data_uri) {
  54. image = data_uri;
  55. });
  56. //mengirimkan data ke file jual_2.php dengan teknik ajax
  57. $.ajax({
  58. url: 'jual_2.php',
  59. type: 'POST',
  60. data: {
  61. nama_produk: nama_produk,
  62. harga: harga,
  63. stok: stok,
  64. detail_produk: detail_produk,
  65. kategori: kategori,
  66. nama_kedai: nama_kedai,
  67. tanggal_input: tanggal_input,
  68. },
  69. success: function () {
  70. alert('input data berhasil');
  71. window.location=('kedai_saya.php')
  72. // menjalankan fungsi update setelah kirim data selesai dilakukan
  73. update()
  74. }
  75. })
  76. });
  77. //fungsi update untuk menampilkan data
  78. function update() {
  79. $.ajax({
  80. url: 'jual2.php',
  81. type: 'get',
  82. success: function (data) {
  83. $('#data').html(data);
  84. }
  85. });
  86. }
  87. </script>
  88.  
  89. ini code backendnya
  90.  
  91. <?php
  92.  
  93. //mendefinisikan folder
  94. define('UPLOAD_DIR', 'gambar_produk/');
  95. //koneksi ke database
  96. include 'koneksi.php';
  97. $img = $_POST['image'];
  98. //menangkap variabel
  99. $nama_produk = $_POST['nama_produk'];
  100. $harga = $_POST['harga'];
  101. $berat = $_POST['berat'];
  102. $quantity = $_POST['quantity'];
  103. $detail_produk = $_POST['detail_produk'];
  104. $kategori = $_POST['kategori'];
  105. $nama_kedai = $_POST['nama_kedai'];
  106. $tanggal_input = $_POST['tanggal_input'];
  107.  
  108. $img = str_replace('data:image/png;base64,', '', $img);
  109. $img = str_replace(' ', '+', $img);
  110. $data = base64_decode($img);
  111.  
  112. //menamai file, file dinamai secara random dengan unik
  113. $file = UPLOAD_DIR . uniqid() . '.png';
  114.  
  115. $success = file_put_contents($file, $data);
  116. print $success ? $file : 'Unable to save the file.';
  117.  
  118. //memasukkan data ke dalam tabel biodata
  119. mysqli_query($koneksi, "insert into produk set nama_produk='$nama_produk', harga='$harga', quantity='$quantity', detail_produk='$detail_produk', kategori='$kategori', nama_kedai='$nama_kedai', tanggal_input='$tanggal_input', gambar_produk='$file'");
Ada 1 File Kiriman :
1. tampilan_gambar_yang_diupload.JPG (80 KB)

Ada 2 Jawaban

Hardiansyah
commented on 31 Mar 2022 17:58:21
  1. Assalamualaikum,..
  2. 1. Untuk upload file/gambar lewat ajax tidak tepat
  3. 2. Tidak mendefinisikan file gambar ke format data yg akan dikirimkan lewat ajax
  4. 3. penerimaan file ke file php masih salah
  5. 4. cara upload file lewat php tidak ada
aanlavista
commented on 01 Apr 2022 13:24:03
  1. Assalamualaikum,..
  2. bagaimana yang seharusnya om hardi?
  3. kalau tanpa base64 bagaimana code yang seharusnya
Maaf, Untuk Memberikan Komentar Anda Harus Login !!!