ساخت تصاویر بندانگشتی با PHP
292 بازدید
تصاویر می توانند با استفاده از 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(){} }); })); |
این اسکریپت 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 در جی کوئری نهایت استفاده را برده باشید .
برای دانلود سورس کد کامل این آموزش از باکس دانلود استفاده کنید.
هر سوالی داشتید ، از قسمت نظرات ارسال کنید . سریعا ، پاسخگوی سوالات شما هستیم .
موفق و پیروز باشید.
دیدگاه کاربران