پلاگین جی کوئری آپلود فایل

برای آپلود فایل های خود را بکشید و رها کنید

Image

درمورد این پلاگین بیشتر بدانید

گاهی ساخت پلاگین با جی کوئری بسته به پروژه تعریف شده زمانبر و سخت می شود. همانطور که گفته جامعه بزرگی از برنامه نویسان درحال توسعه و ساخت پلاگین با این کتابخانه هستند که کار را برای شما بسیار راحت می کند.

مزایایی این پلاگین

  • پیش نمایش تصاویر بعد از آپلود
  • تعیین حداکثر فایل ساز
  • تعیین نوع فایل آپلودی
  • تغییر نام فایل ها در هنگام آپلود
  • امکان نمایش پیغام های خطا در هر قسمت که بخواهید
  • امکان تغییر مکان پیش نمایش تصاویر

روش استفاده از این پلاگین

برای استفاده از این پلاگین ابتدا باید فایل آن را از طریق لینک زیر دانلود کنید سپس طبق مراحلی که در پایین برای شما قرار داده ام عمل کنید

برای دانلود افزونه روی لینک دانلود آن کلیک کنید دانلود پلاگین file uploader

ابتدا کد html زیر را در صفحه وب خود قرار دهید 


    <div class="file-upload-wrapper">
        <div class="file-upload-wrapper-title">
            <h4>File Upload</h4>
            <hr />
            <button class="file-upload-wrapper-title__btn">
                Upload Now
            </button>
        </div>
        <div class="box-fileupload">
            <input type="file" id="fileId" class="file-upload-input" name="files" multiple>
            <label for="fileId" class="file-upload-btn"></label>
            <p class="box-fileupload__lable">Drop files here to upload</p>
        </div>
        <div class="error-wrapper"></div>
        <div class="image-previwe"></div>
    </div>

بعد از دانلود فایل پلاگین تگ زیر را به آخر تگ head 

<link rel="stylesheet" href="assets/css/style.css">

سپس فایل های اسکریپت زیر را قبل از تگ بسته body قرار دهید وجه داشته باشید فایل app.js بعد از فایل جی کوئری باشد 


    <script src="assets/js/jquery-3.4.1.min.js"></script>
    <script src="assets/js/app.js"></script>

بعد از انجام کار های که در بالا گفته شده باید این کد رو توی صحفه تون قرار بدین 



  $(document).ready(function(){
      $(".file-upload-wrapper").fileUplodPlugins({
          inputFileUpload: "#fileId",
          ValidType: ['image/jpeg', 'image/png',],
          btnUpload: "file-upload-wrapper-title__btn",
          deleteImageBtn: ".image-previwe__delete-btn",
          boxFileUploadPreviwe: '.image-previwe',
          boxErrorPreviwe: '.error-wrapper',
      })
  });

نسخه نهایی

کاربران گرامی توجه نمایید که باید کد های شما به شکل کل های مشخص شده باشد تا پلاگین برای شما به درست کار کند 


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="assets/css/style.css">
    <title>Document</title>
</head>

<body>
    <div class="maincontent">
        <div class="file-upload-wrapper">
            <div class="file-upload-wrapper-title">
                <h4>File Upload</h4>
                <hr />
                <button class="file-upload-wrapper-title__btn">
                    Upload Now
                </button>
            </div>
            <div class="box-fileupload">
                <input type="file" id="fileId" class="file-upload-input" name="files" multiple>
                <label for="fileId" class="file-upload-btn"></label>
                <p class="box-fileupload__lable">Drop files here to upload</p>
            </div>
            <div class="error-wrapper"></div>
            <div class="image-previwe"></div>
        </div>
    </div>
    <script src="assets/js/jquery-3.4.1.min.js"></script>
    <script src="assets/js/app.js"></script>
    <script>


  $(document).ready(function(){
      $(".your-selector").fileUplodPlugins({
        inputFileUpload: "#fileId",
        ValidType: ['image/jpeg', 'image/png',],
        btnUpload: ".loader-title__btn",
        deleteImageBtn: ".image-previwe__delete-btn",
        boxFileUploadPreviwe: '.image-previwe',
        boxErrorPreviwe: '.error-wrapper',
      })
  });


</script>
</body>

</html>

نیاز به کمک دارین

محمد یزدان پناه

من محمد یزدان پناه هستم اگه بخوام خیلی مختصر درمورد نحوه توسعه این پلاگین رو براتون توضیح بدم داستان از اونجایی شروع شد که برای یه بخش از پروژه توی شرکت نیاز به همیچین پلاگین داشیتم که من خیلی سرچ کردم پلاگین های مشابه بود اما ما نیاز داشتیم که یه سری ویژگی که های سفارشی داشته باشیم برای همین یه روز شروع کردم این و این پلاگین رو برای شرکت نوشتم بعدش تصیمیم گرفتم که این پلاگین رو هم در اختیار شما قرار بدم

plugin repository in github

فرم تماس جهت مشاوره

امیدوارم این پلاگین به کارتون بیاد