ساخت سیستم media library مشابه وردپرس با PHP و جاوا اسکریپت ( فایل منیجر AJAX )

ساخت سیستم 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" // آیکون سفارشی برای فایل های غیر تصاویر
        })
    });

});


دانلود سورس فایل منیجر AJAX

ارسال نظر

جهت استفاده از کد حتما از تگ pre استفاده نمایید .

contact us

انجام انواع پروژه های وب


( فروشگاهی ، خبری ، رزرواسیون ، وردپرس ، حل مشکلات وردپرسی )

شماره تماس و واتساپ : 09398554859