ساخت سیستم media library مشابه وردپرس با PHP و جاوا اسکریپت ( فایل منیجر AJAX )
فایل منیجر AJAX با PHP – در این آموزش قصد داریم که با استفاده از jquery و bootstrap و کتابخانه file.manager.js یک فایل منیجر همانند وردپرس داشته باشیم .
از این رو قبل از هر چیز به یک سرور نیاز داریم تا اطلاعاتمان را از آن دریافت کنیم که در اینجا از آدرس زیر می توان استفاده کرد :
https://api.rapidcode.ir/rest/index.php/products
همچنین برای بارگذاری فایل هنگام اسکرول جهت تشخیص پایان اسکرول عمودی از این آموزش بهره بردیم .
دموی فایل منیجر AJAX
فایل index.html
<!DOCTYPE html>
<html lang="fa">
<head>
<meta charset="UTF-8">
<title>Rapidcode.iR - سورس کد</title>
<link rel="stylesheet" href="static/css/lib/bootstrap.min.css">
<link rel="stylesheet" href="static/css/main.css">
</head>
<body>
<div class="container">
<a id="introduce" href="https://rapidcode.ir" target="_blank">رپید کد • کتابخانه مجازی برنامه نویسان</a>
<button id="b-demo1">وارد کردن فایل</button>
<input type="text" id="demo1" placeholder="فقط تصاویر">
<br>
<br>
<br>
<button id="b-demo2">وارد کردن فایل</button>
<input type="text" id="demo2" placeholder="هر نوع فایل">
</div>
<script src="static/js/lib/jquery.min.js"></script>
<script src="static/js/lib/bootstrap.bundle.min.js"></script>
<script src="static/js/lib/file.manager.js"></script>
<script src="static/js/app.js"></script>
</body>
</html>
فایل main.css
.ds-none{
display: none;
}
.border-6{
border-width: 6px !important;
}
.border.active{
border-color: #3a5de7!important;
}
اسکریپت app.js
$(document).ready(function(){
$(document).on("click", "#b-demo1", function () {
openFileManager({
multiple: true, // در صورتی چند فایل میخواهید انتخاب کنید
dataMutipleMaxItem : 3, // در صورتی که انتخاب چندگانه multiple فعال باشد تعداد آیتم های انتخابی
groupType: "image", // محدودیت در انتخاب نوع فایل
target: "#demo1", // آیدی input برای دریافت مقدار
dialogReload : true, // این که با هربار باز شدن دیالوگ فایل ها مجدد بارگذاری شود
url : "https://api.rapidcode.ir/rest/index.php/products" // در صورتی که سرور مدیریت فایل با rest را میخواهید تغییر دهید
})
});
$(document).on("click", "#b-demo2", function () {
openFileManager({
multiple: true,
groupType: "all",
target: "#demo2",
iconFileUrl : "https://rapidcode.ir/wp-content/themes/rapidcode/static/image/icon/category.png" // آیکون سفارشی برای فایل های غیر تصاویر
})
});
});
لیست نظرات
لینک دانلود غیر فعال شده
حل شد