cara meng update atau meng edit gambar menggunakan php jquery ajax

warbyasah...

setelah 3 hari nyari tau cara update gambar di php jquery ajax berdasarkan id user yang login,, akhir nya saya ketemu juga cara nya dengan susah payah, tapi seru sih saya jadi pusing pusing gimane gitu hehehe... begitu saya berhasil melalukan update gambar profil seneng nya tuh kayak orang dapet kabar baik hahaha

nah mudah - mudahan ini bermanfaat buat yang sedang belajar php jquery ajax yang lagi kebingungan nyari cara nya kayak kemaren saya bingung selama 3 hari nyari cara nya biar bisa update gambar/foto profil sesuai dengan id user yang sedang login...

maklumin yak om kalo tulisan codingan nya jelek hehehe.. soalnya saya juga baru maen - maen sama ajax..

pertama codingan html nya kaya gini..

<?php
	require_once "core/init.php";


	if (!isset($_SESSION['user'])) {

		header('Location: login.php');
	}

	$id = $_SESSION['id'];
	$akademik_kuliah = tampilkan();
	$akademik_sks 	 = tampilkan_sks();
	$login 			 = tampilkan_data_login($id);
?>

<?php while ($row = mysqli_fetch_assoc($login)): ?>
			<div id="kerangka">
			<img src="profil/<?= $row['foto']; ?>" class="foto" data-id="<?= $row['id']; ?>">
			</div>

			<div id="btn_ubah">
				<input type="button" name="btn-ubah" id="btn-ubah" data-id="<?= $row['id']; ?>" value="Ubah Foto">
			</div>

			<div id="btn_upload">
				<form id="submit_form" data-id="<?= $row['id']; ?>" action="upload.php" method="post" enctype="multipart/form-data">
					<input type="file" name="file" id="file">
					<input type="button" name="btn-upload" id="btn-upload" data-id="<?= $row['id']; ?>" value="Upload Foto">
				</form>
				<?php endwhile; ?>
			</div>

yang kedua codingan buat pemicu atau triger nya biar pada saat tombol upload di klik akan melakukan proses upload nya atau bisa dibilang ini codingan ajax nya..

$('#file').change(function(){

	$('#btn-upload').on('click', function(){
	//kode di bawah ini berfungsi untuk mengambil (GET) atribut - atribut
	//dari file gambar yang akan kita upload seperti nama file,
	//type file, size file. atribut - atribut ini yang akan disimpan
        //ke dalam aray file yang nantinya array file tersebut akan di akses
        //oleh php pada proses upload.
	var data = new FormData(this);
	data.append('file', $(file)[0].files[0]);

	$.ajax({
	url: 'upload.php',
	type: 'POST',
	cache: false,
	contentType: false,
	processData: false,
	data: data,
	success: function(data){
	if(data){
		$('#kerangka').html(data);
		$('#btn_upload').hide();
		$('#btn-upload').hide('slow');
	}else{
	    alert(data);
	}
      }
   });
  });
});

yang ketiga ini codingan php nya atau upload.php . disini saya mengupdate atau merubah gambar nya dengan mengambil id user nya yang udah saya simpen sebelum nya di session, lalu saya inisialisi id session nya ke dalam file upload.php nya kemudian saya masukan id session nya kedalam query nya agar bisa mengupdate atau merubah gambar profil user sesuai dengan id user yang sedang login..

di codingan ini juga udah termasuk tampilan ketika tombol upload nya di klik dia akan menampilkan gambar nya tanpa merefresh halaman nya..

<?php
	require_once "core/init.php";

	global $link;

	$id = $_SESSION['id'];
	$format = pathinfo($_FILES['file']['name'], PATHINFO_EXTENSION);

	if(is_array($_FILES)){

		if ($_FILES['file']['error'] === 0) {

				if ($_FILES['file']['size'] <= 5000000) {

					if ($format === 'jpg' || $format === 'png') {
						move_uploaded_file($_FILES['file']['tmp_name'], 'profil/' .$_FILES['file']['name']);
						$query = "UPDATE login SET foto='".$_FILES['file']['name']."' WHERE id='$id'";
						$result = mysqli_query($link, $query);

						if ($result) {
							$query = "SELECT foto FROM login WHERE id='$id'";
							$result2 = mysqli_query($link, $query);

							while($row = mysqli_fetch_assoc($result2)){ ?>
							<div id="kerangka" data-id="<?= $row["id"]; ?>">
								<img src="profil/<?= $row['foto'];?>" class="foto" data-id="<?= $row["id"]; ?>"/>
							</div>

							<div id="btn_ubah">
								<input type="button" name="btn-ubah" id="btn-ubah" data-id="<?= $row['id']; ?>" value="Ubah Foto">
							</div>

							<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
							<script type="text/javascript">
								$(document).ready(function(){

									$('#btn_ubah').on('click', function(){
										$(this).hide('slow');
										$('#btn_upload').show('slow');
										$('#btn-upload').hide();
									});

									$('#file').on('click', function(){
										$('#btn-upload').show('slow');
									});
								});
							</script>

						<?php
							}

						}else{
							echo "<script>alert('Gagal Ubah');</script>";
						}

					}else{
						echo "<script>alert('File Yang Dimasukan Harus JPG atau PNG');</script>";
					}

				}else{
					echo "<script>alert('File Yang Dimasukan Terlalu Besar');</script>";
				}

			}else{
				echo "<script>alert('Ada Masalah Saat Upload File');</script>";
			}
		}
?>

yang ke empat ini codingan menampilkan data foto atau gambar profil user yang sudah tersimpan di database yang saya bikin dengan nama tabel nya itu "login"..

function tampilkan_data_login($id){
		global $link;

		$query  = "SELECT id,foto FROM login WHERE id = '$id'";
		$result = mysqli_query($link, $query) or die("Gagal Menampilkan Data Login");

		return $result;
	}

sekian dan terima kasih..