JQuery, PHP

Upload image crop modal dengan PHP dan jQuery

Upload image crop modal dengan PHP dan jQuery

Upload gambar upload dan crop adalah fungsi yang paling penting dari setiap proyek web. Kami menyediakan pengalaman pengguna yang luar biasa untuk meng-upload dan mengubah gambar profil mereka dalam modal dan juga memungkinkan mereka untuk memotong gambar upload profil dalam modal. Jadi di sini dalam artikel ini, Anda akan belajar cara menerapkan upload foto dan  crop gambar di sebuah kotak modal yang menggunakan PHP dan jQuery.

 

Dalam artikel ini saya telah juga berbagi Live Demo dan kode sumber untuk upload dan crop gambar dalam modal menggunakan PHP dan jQuery.

Library yang digunakan dengan contoh ini:

 

  • jQuery library: ini adalah library dasar untuk mendukung plugin jQuery lain
  • Boostrap 3: Bootstrap digunakan untuk membuat tata letak halaman
  • Imgareaselect: Plugin ini digunakan untuk menentukan koordinasi crop dan crop gambar.
  • Ajax form: Plugin jQuery ini digunakan untuk menangani kirim form Ajax.

 

File yang digunakan dengan contoh ini

 

  • php: ini adalah file utama yang membuat tata letak HTML untuk menunjukkan perubahan gambar tombol dengan pratinjau gambar.
  • php: file ini bertanggung jawab untuk semua fungsionalitas sisi server seperti cropping gambar dan saving
  • js: file ini berisi kode JavaScript dan fungsi yang terkait dengan croping ukuran gambar dan menyimpan gambar yang di crop.

 

Langkah-langkah untuk menerapkan Upload image crop modal dengan PHP dan jQuery

 

Baca juga :

Upload gambar tanpa page refresh dengan PHP dan jQuery

Desain Login, daftar & lupa password modal form dengan Bootstrap dan jQuery

Upload multiple images menggunakan jQuery, Ajax dan PHP

 

Langkah 1: Pertama-tama kita akan mencakup semua file library yang diperlukan dan JavaScript di file index.php.









 

Langkah 2: Sekarang kita akan menciptakan HTML dalam index.php untuk menampilkan Change profile picture button dan image preview untuk tampilan gambar profile yang telah disimpan.


 

Langkah 3: Sekarang kita akan menciptakan model box dalam index.php untuk meng-upload gambar dan fungsi crop.

 

Langkah 4: Sekarang akan menunjukkan model box menggunakan jQuery ketika mengklik tombol change profile picture.

jQuery('#change-profile-pic').on('click', function(e){
jQuery('#profile_pic_modal').modal({show:true});
});

 

Langkah 5: Sekarang kita akan menunjukkan gambar untuk proses crop pada bootstrap modal box dan juga menangani bentuk form submit menggunakan jQuery form plugin.

jQuery('#profile-pic').on('change', function() {
jQuery("#preview-profile-pic").html('');
jQuery("#preview-profile-pic").html('Please wait while Uploading....');
jQuery("#cropimage").ajaxForm(
{
target: '#preview-profile-pic',
success: function() {
jQuery('img#photo').imgAreaSelect({
aspectRatio: '1:1',
onSelectEnd: getSizes,
});
jQuery('#image_name').val(jQuery('#photo').attr('file-name'));
}
}).submit();
});

 

Langkah 6: Sekarang kita akan menangani crop gambar dan memanggil saveCropImage() metode ajax untuk menyimpan gambar pada folder server yang telah ditetapkan sebelumnya ketika mengklik tombol Save & Crop.

jQuery('#save_crop').on('click', function(e){
e.preventDefault();
params = {
targetUrl: 'insert_picture.php?action=save',
action: 'save',
x_axis: jQuery('#hdn-x1-axis').val(),
y_axis : jQuery('#hdn-y1-axis').val(),
x2_axis: jQuery('#hdn-x2-axis').val(),
y2_axis : jQuery('#hdn-y2-axis').val(),
thumb_width : jQuery('#hdn-thumb-width').val(),
thumb_height:jQuery('#hdn-thumb-height').val()
};
saveCropImage(params);
});

 

Langkah 7: Fungsi JavaScript saveCropImage() untuk menyimpan gambar yang telah di crop.

function saveCropImage(params) {
jQuery.ajax({
url: params['targetUrl'],
cache: false,
dataType: "html",
data: {
action: params['action'],
id: jQuery('#hdn-profile-id').val(),
t: 'ajax',
w1:params['thumb_width'],
x1:params['x_axis'],
h1:params['thumb_height'],
y1:params['y_axis'],
x2:params['x2_axis'],
y2:params['y2_axis'],
image_name :jQuery('#image_name').val()
},
type: 'Post',
success: function (response) {
jQuery('#profile_pic_modal').modal('hide');
jQuery(".imgareaselect-border1,.imgareaselect-border2,.imgareaselect-border3,.imgareaselect-border4,.imgareaselect-border2,.imgareaselect-outer").css('display', 'none');
jQuery("#profile_picture").attr('src', response);
jQuery("#preview-profile-pic").html('');
jQuery("#profile-pic").val();
},
error: function (xhr, ajaxOptions, thrownError) {
alert('status Code:' + xhr.status + 'Error Message :' + thrownError);
}
});
}

 

Langkah 8: Sekarang menangani upload foto profil di sisi server untuk meng-upload gambar / merubah gambar pada server dan juga menangani perubahan menyimpan gambar ke dalam tabel database MySQL dalam file insert_picture.php.

/* Function to change profile picture */
function changeProfilePic() {
	$post = isset($_POST) ? $_POST: array();
	$max_width = "500"; 
	$userId = isset($post['hdn-profile-id']) ? intval($post['hdn-profile-id']) : 0;
	$path = 'images';
	$valid_formats = array("jpg", "png", "gif", "jpeg");
	$name = $_FILES['profile-pic']['name'];
	$size = $_FILES['profile-pic']['size'];
	if(strlen($name)) {
		list($txt, $ext) = explode(".", $name);
		if(in_array($ext,$valid_formats)) {
			if($size<(1024*1024)) {
				$actual_image_name = 'avatar' .'_'.$userId .'.'.$ext;
				$filePath = $path .'/'.$actual_image_name;
				$tmp = $_FILES['profile-pic']['tmp_name'];
				if(move_uploaded_file($tmp, $filePath)) {
					$width = getWidth($filePath);
					$height = getHeight($filePath);
					//Scale the image if it is greater than the width set above
					if ($width > $max_width){
						$scale = $max_width/$width;
						$uploaded = resizeImage($filePath,$width,$height,$scale, $ext);
					} else {
						$scale = 1;
						$uploaded = resizeImage($filePath,$width,$height,$scale, $ext);
					}					
					echo "";
				}
				else
				echo "failed";
			}
			else
			echo "Image file size max 1 MB"; 
		}
		else
		echo "Invalid file format.."; 
	}
	else
	echo "Please select image..!";
	exit;
}

 

Langkah 9: Sekarang akhirnya Simpan update mengubah gambar ke database MySQL menggunakan fungsi PHP saveProfilePic().

/* Function to handle save profile pic */
function saveProfilePic(){
	include_once("connection.php");
	$post = isset($_POST) ? $_POST: array();	
	//Handle profile picture update with MySQL update Query using $options array	
	if($post['id']){
		$sql_query = "SELECT * FROM users WHERE id_user = '".mysqli_escape_string($conn, $post['id'])."'";		
		$resultset = mysqli_query($conn, $sql_query) or die("database error:". mysqli_error($conn));		
		if(mysqli_num_rows($resultset)) {                     
			$sql_update = "UPDATE users set profile_photo='".mysqli_escape_string($conn,$post['image_name'])."' WHERE id_user = '".mysqli_escape_string($conn, $post['id'])."'";			
			mysqli_query($conn, $sql_update) or die("database error:". mysqli_error($conn));
		}
	}
}

 

Anda dapat melihat lihat contoh lengkap dari demo link. Anda juga dapat mengunduh skrip demo lengkap dari link di bawah.

 

Yang mungkin Anda suka :

Site Under Maintenance Flat Responsive Widget Template Popojicms

Menampilkan video dari kanal YouTube menggunakan Data API v3 dan PHP

Tutorial cara membuat YouTube Data API Key

Share This Post

Leave Comment

Get more stuff like this
in your inbox

Subscribe to our mailing list and get interesting stuff and updates to your email inbox.