تصاویر می توانند با استفاده از 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 در جی کوئری نهایت استفاده را برده باشید .
برای دانلود سورس کد کامل این آموزش از باکس دانلود استفاده کنید.
هر سوالی داشتید ، از قسمت نظرات ارسال کنید . سریعا ، پاسخگوی سوالات شما هستیم .
موفق و پیروز باشید.
سلام دوست عزیز وقتتون بخیر باشه
من از این کد ها استفاده کردم ولی متاسفانه وقتی از رویداد onclick برای اون تگ a استفاده میکنم و تابع رو فراخوانی میکنم کار نمیکنه و این خطا رو میده request.php:102 Uncaught ReferenceError: clickremove is not defined
at HTMLAnchorElement.onclick (request.php:102:120)
توی اون خط این کد وجود داره :
حذف تصویر
سلام ممنون
در تابع onlick باید کلیک پیش فرض رو غیر فعال کنید
$(‘tag’).onlclick(function(event){
event.preventDefault()
});
من گرفتم اول رویدا click رو واسه آیدی تگ a در نظر گرفتم و رویداد کلیک پیشفرض و ازش گرفتم باز هم همین خطا رو داد بعد گرفتم تگ a رو به span تغییر دادم ولی باز هم همین خطا رو داد
دارم یه آپلودر طراحی میکنم که قرار ۲ تا دکمه داشته باشه یکی نمایش عکس که اوکی و عکس و نمایش میده و یکی هم حذف اون عکس یا حالا هر فایلی ولی اصلا آیجکس برا این مورد کار نمیکنه
هر بار کلیک میکنم این خطا میاد
یکم دستکاریش کردم الان این خطا رو بر میگردونه
Uncaught SyntaxError: Unexpected token ‘.’ (at request.php:102:148)
اینم نوع سینتکسش :
حذف تصویر
خطای برگشتی از ajax در php هست خط ۱۰۲ فایل request.php رو چک کنید
جناب شفیعی عزیز مشکل حل شد خداروشکر
کل مشکل من سر این بود که من باید اینطوری مینوشتم
<span id="remove" onclick="clickremove('’)” class=”btn btn-danger”>حذف تصویر
اما قبلش داخل تابع قبل php تک کوتیشن رو نذاشته بودم برا همین قبول نمیکرد
ممنونم از راهنماییتون، واقعا سپاسگزارم
ممنون که راه حل رو به اشتراک گذاشتید
خواهش میکنم جناب شفیعی عزیز.
عذر خواهم شما داخل خروجی تگ های php رو کاری کردین نمایش نده برا همین داخل تابع onclick اون php رو نمایش نداد