آموزش input type file multiple با پیش نمایش و حذف
در بسیاری از پروژه های ASP.NET MVC یا ASP.NET Core زمانی که می‌خواهیم برای یک بخش، چندین تصویر آپلود کنیم و تعداد تصواویر هم مشخص نیست، می‌توانیم از Input type file با قابلیت multiple استفاده کنیم.
اما زمانی که در این input تعدادی تصویر را انتخاب می‌کنیم، ممکن است در هنگام انتخاب تصویر، یک مورد اشتباه شده باشد و یا 1 تصویر از قلم افتاده باشد.
پس باید دوباره تمام آیتم ها را انتخاب نماییم.
پس ما می‌خواهیم یک پیش نمایش از تصاویر انتخاب شده در هر input ها را مشاهده کنیم و هر یک از تصاویر که اشتباه بود را بتوانیم به راحتی حذف یا ویرایش کنیم.
در ادامه با پرعلم همراه باشید تا نجوه قرار دادن گالری تصاویر همراه با پیش نمایش و حذف آیتم ها را بررسی کنیم.
آموزش input type file multiple با پیش نمایش و حذف
در بسیاری از وبسایت های خارجی، قطعه کد ها یا plugin های jquery برای پیش نمایش و حذف آیتم های input type file multiple وجود دارد. اما مشکل مهم و اساسی که این قطعه کد یا plugin ها دارند این است که زمانی که شما یک تصویر را حذف می‌کنید، فقط تگ img مربوط به پیش نمایش حذف می‌شود و فایل های input سر جای خود باقی مانده است.
ما در این مقاله از وبسایت پرعلم، اسن مشکل را برطرف کرده ایم و با استفاده از روش زیر می‌توانید گالری تصاویر را برای پروژه ی خود قرار دهید.
روش انجام این کار به شرح زیر است:
1 – قرار دادن کد CSS
در ایتدا کد css زیر را برای زیبایی ظاهری، در استایل های برنامه خود قرار دهید:
#previewimg1 {
width: 50%;
border: 1px solid gray;
padding: 2px;
border-radius: 3px;
}
#previewimg2 {
width: 50%;
border: 1px solid gray;
padding: 2px;
border-radius: 3px;
}
#previewimg3 {
width: 50%;
border: 1px solid gray;
padding: 2px;
border-radius: 3px;
}
شما می‌توانید با توجه به قالبی که از آن استفاده می‌کنید، تنظیمات width تصاویر را خودتان مشخص کنید. در پروژه ی من 50% مناسب بود.
2 – قرار دادن کد JQuery
در ابتدا لطفا jquery را دانلود کنید و آن را در برنامه خود قرار دهید. شما می‌تواید jquery را از صفحه ی Download JQuery دانلود نمایید.
سپس script زیر را در صفحه ی مورد نظر بنویسید:
<script>
var abc = 0;
$(‘#add_more’).click(function () {
$(this).before($(“<div/>”, { id: ‘filediv’ }).fadeIn(‘slow’).append($(“<input/>”,
{
name: ‘Gallery’,
type: ‘file’,
id: ‘file’
}),
$(“<br/><br/>”)
));
});
$(‘body’).on(‘change’, ‘#file’, function () {
if (this.files && this.files[0]) {
abc += 1; //increementing global variable by 1
var z = abc – 1;
var x = $(this)
.parent()
.find(‘#previewimg’ + z).remove();
$(this).before(“<div id=’abcd” + abc + “‘ class=’abcd’><img id=’previewimg” + abc + “‘ src=”/></div>”);
var reader = new FileReader();
reader.onload = imageIsLoaded;
reader.readAsDataURL(this.files[0]);
$(this)
.hide();
$(“#abcd” + abc).append($(“<img/>”, {
id: ‘img’,
src: ‘/delete.png‘, //the remove icon
alt: ‘delete’,
style: ‘cursor:pointer;width:30px’
}).click(function () {
$(this)
.parent()
.parent()
.remove();
}));
}
});
//image preview
function imageIsLoaded(e) {
$(‘#previewimg’ + abc)
.attr(‘src’, e.target.result);
};
</script>
در script فوق باید به جای نام Gallery که با رنگ صورتی مشخص شده است، نام مورد نظر خود برای گالری را بنویسید که در ورودی متد post اکشن مورد نظر این نام را بنویسید.
همچنین برای نام تصویر delete.png که با رنگ سبز مشخص شده است، باید یک آیکون حذف از اینترنت پیدا کنید و در پروژه قرار دهید و به جای بخش سبز رنگ، آدرس آیکون حذف در پروژه خود را قرار دهید.
3 – قرار دادن کد Html
اکنون باید کد html زیر را در بخش دلخواه خود قرار دهید:
<div id=”filediv”><input name=”Gallery” type=”file” id=”file” /></div>
<br />
<input type=”button” id=”add_more” class=”btn btn-primary btn-xs” value=”افزودن تصویر+” /><br><br>
در اینجا نیز باید به جای نام که با رنگ صورتی مشخص شده است، همان نام که در script بالا استفاده کردید را قرار دهید.
اکنون شما با موفقیت می‌توانید گالری تصاویر را در پروژه خود استفاده نمایید.
نحوه کار برنامه
همانطور که در اول مطلب نیز گفتیم، تعداد تصاویری که می‌خواهیم برای هر محصول استفاده کنیم، مشخص نیست و ممکن است هر محصول تعداد متفاوتی تصویر در گالری تصاویر خود داشته باشد.
زمانی که برنامه فوق را اجرا کنید، یک input type file وجود دارد و در زیر آن یک دکمه با عنوان افزودن تصویر قرار دارد.
زمانی که شما یک تصویر را انتخاب کنید در بالای input type file پیش نمایش تصویر را نمایش می‌دهد و در کنار آن یک آیکون برای حذف وجود دارد.
زمانی که شما روی آیکون حذف کلیک کنید تصویر پیش نمایش و input مربوط به آن حذف می‌شود و به این صورت تصویر حذف شده دیگر به کنترلر و اکشن مربوطه ارسال نمی‌شود.
و به این صورت شما می‌توانید هر تعداد تصویر را که مورد نیاز بود آپلود نمایید و هر کدام را که خواستید حذف یا ویرایش کنید.
لطفا دیدگاه خود را درباره این مقاله، در ادامه ثبت نمایید…
انجام پروژه ASP.NET Core
یکی از خدمات شرکت پرعلم، برنامهنویسی تحت وب با استفاده از تکنولوژی ASP.NET Core می‌باشد.
مجموعه پرعلم با بیش از 5 سال تجربه در طراحی و پیاده سازی انواع برنامه ها و وبسایت های اینترنتی، در خدمت شما عزیزان می‌باشد.
همچنین پروزه های دانشجویی رشته کامپیوتر با هزینه کم نیز در مجموعه پرعلم پذیرفته می‌شود.
جهت دریافت مشاوره، با ما تماس بگیرید و یا از طریق واتس اپ با ما در ارتباط باشید:
