افزودن و حذف تصویر با AJAX در جی کوئری

دسته بندی : آموزش jQuery, آموزش PHP ۲۸ اردیبهشت ۱۳۹۷ 72 بازدید

تصاویر می توانند با استفاده از jQuery و اسکریپت PHP حذف و یا اضافه شوند. در آموزش قبلی, ما مثال های آپلود عکس با php و ajax و آپلود چندگانه عکس را دیدم.

اما در این آموزش قصد داریم آپشن حذف (delete) را اضافه کنیم.

در بخش افزودن, ما فایل php آپلود عکس انتخاب شده را در مسیر مشخص فراخوانی می کنیم. برای حذف عکس نیز, فایل php را برای حذف فایل تصویر از فولدر توسط AJAX اجرا می کنیم. ما از تابع unlink() برای حذف تصویر بهره می بریم.

افزودن و حذف تصویر با AJAX در جی کوئری

اسکریپت افزودن عکس برای آپلود فایل تصویر

این کد jQuery برای فراخوانی فایل upload.php استفاده شده است. در صورت آپلود موفقیت آمیز, این اسکریپت تصویر را در مرورگر نمایش می دهد.

المنت HTML نمایش تصویر در php ساخته و به عنوان پاسخ AJAX برگشت داده می شود.

$("#uploadForm").on('submit',(function(e) {
	e.preventDefault();
	$.ajax({
		url: "upload.php",
		type: "POST",
		data:  new FormData(this),
		contentType: false,
		cache: false,
		processData:false,
		success: function(data)
		{
		$("#targetLayer").html(data);
		},
		error: function(){} 	        
   });
}));

$("#uploadForm").on('submit',(function(e) {

e.preventDefault();

$.ajax({

url: "upload.php",

type: "POST",

data: new FormData(this),

contentType: false,

cache: false,

processData:false,

success: function(data)

{

$("#targetLayer").html(data);

error: function(){}

});

}));

حذف تصویر با AJAX در جی کوئری

این اسکریپت jQuery شامل متد AJAX برای فراخوانی کد های حذف فایل با php است. در php , ما از تابع unlink() برای حذف عکس بهره می بریم. همینکه فایل حذف شد, المنت نمایش تصویر با متن “no-image” پر می شود.

function deleteImage(path) {
	$.ajax({
		url: "delete.php",
		type: "POST",
		data:  {'path':path},
		success: function(data){	
			$("#targetLayer").html('<div class="no-image">No Image</div>');
		},
		error: function(){} 	        
	});
}

function deleteImage(path) {

$.ajax({

url: "delete.php",

type: "POST",

data: {'path':path},

success: function(data){

$("#targetLayer").html('<div class="no-image">No Image</div>');

error: function(){}

});

}

امیدوارم از آموزش افزودن و حذف تصویر با AJAX در جی کوئری نهایت استفاده را برده باشید .

حتما بخوانید الگوی MVC در PHP

برای دانلود سورس کد کامل این آموزش از باکس دانلود استفاده کنید.

هر سوالی داشتید ، از قسمت نظرات ارسال کنید . سریعا ، پاسخگوی سوالات شما هستیم .

موفق و پیروز باشید.

دانلــود بـاکـــس

لینک های دانلود به ایمیل شما ارسال می شود

لینک دانلود را همین الان برام ارسال کن

با عضویت در سایت می توانید تمامی فایل ها را به صورت مستقیم دانلود کنید

حسن شفیعی

مدرس ، پنتستر ، توسعه دهنده اپلیکیشن های تحت وب ، عضو مرکز حامی نخبگان و از مدیران و اعضای رسمی تیم امنیتی آشیانه هستم . علاقه خاصی به زبان php و امنیت شبکه و لینوکس دارم و هر روز تلاش می کنم به این حوزه ها مسلط تر شوم و اطلاعاتم را در وب به اشتراک بگذارم

راه آسان تری برای ارتباط با کاربران مان پیدا کردیم کانال تلگرام نت پارادیس