طراحی سایت, ساخت ربات تلگرام, آموزش php , سورس کد php ,سورس ربات تلگرام , سورس فروشگاه اینترنتی , آموزش طراحی وب

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

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

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

تصاویر می توانند با استفاده از 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 در جی کوئری نهایت استفاده را برده باشید .

حتما بخوانید امتیاز دهی ستاره ای در PHP

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

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

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

اگر مفید بود, لطفا به اشترک بگذارید تا دوستان دیگر نیز بهره ببرند

<< ساخت Sliding Menu با jQuery ساخت منو ریسپانسیو با jQuery و CSS >>

دانلود نسخه PDF این مقاله

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

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

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

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

حسن شفیعی

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

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