تصاویر می توانند با استفاده از jQuery و اسکریپت PHP حذف و یا اضافه شوند. در آموزش قبلی, ما مثال های آپلود عکس با php و ajax و آپلود چندگانه عکس را دیدم.
اما در این آموزش قصد داریم آپشن حذف (delete) را اضافه کنیم.
در بخش افزودن, ما فایل php آپلود عکس انتخاب شده را در مسیر مشخص فراخوانی می کنیم. برای حذف عکس نیز, فایل php را برای حذف فایل تصویر از فولدر توسط AJAX اجرا می کنیم. ما از تابع unlink() برای حذف تصویر بهره می بریم.
اسکریپت افزودن عکس برای آپلود فایل تصویر
این کد jQuery برای فراخوانی فایل upload.php استفاده شده است. در صورت آپلود موفقیت آمیز, این اسکریپت تصویر را در مرورگر نمایش می دهد.
المنت HTML نمایش تصویر در php ساخته و به عنوان پاسخ AJAX برگشت داده می شود.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | $("#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” پر می شود.
1 2 3 4 5 6 7 8 9 10 11 | 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 در جی کوئری نهایت استفاده را برده باشید .
برای دانلود سورس کد کامل این آموزش از باکس دانلود استفاده کنید.
هر سوالی داشتید ، از قسمت نظرات ارسال کنید . سریعا ، پاسخگوی سوالات شما هستیم .
موفق و پیروز باشید.
