آپلود کننده فایل

فالکون از DropzoneJS برای آپلود فایل استفاده می کند. DropzoneJS یک کتابخانه منبع باز است که آپلود فایل‌های drag & drop را با پیش‌نمایش تصویر فراهم می‌کند.

مستندات برای Dropzone
آپلود تک فایل

Dropzone برای آپلود فایل به یک آدرس اینترنتی معتبر سمت سرور نیاز دارد. شما به راحتی می توانید آن را از data-options ویژگی مثل تنظیم کنیدdata-options!={ url: 'valid/url'}

...
فایل خود را اینجا رها کنید
<div class="dropzone dropzone-single p-0" data-dropzone="data-dropzone" data-options='{"url":"valid/url","maxFiles":1,"dictDefaultMessage":"Choose or Drop a file here"}'>
  <div class="fallback"><input type="file" name="file" /></div>
  <div class="dz-preview dz-preview-single">
    <div class="dz-preview-cover dz-complete"><img class="dz-preview-img" src="../../../assets/img/generic/image-file-2.png" alt="..." data-dz-thumbnail="" /><a class="dz-remove text-danger" href="#!" data-dz-remove="data-dz-remove"><span class="fas fa-times"></span></a>
      <div class="dz-progress"><span class="dz-upload" data-dz-uploadprogress=""></span></div>
      <div class="dz-errormessage m-1"><span data-dz-errormessage="data-dz-errormessage"></span></div>
    </div>
    <div class="dz-progress"><span class="dz-upload" data-dz-uploadprogress=""></span></div>
  </div>
  <div class="dz-message" data-dz-message="data-dz-message">
    <div class="dz-message-text"><img class="me-2" src="../../../assets/img/icons/cloud-upload.svg" width="25" alt="" />Drop your file here</div>
  </div>
</div>
آپلود چند فایل
فایل های خود را اینجا رها کنید
<form class="dropzone dropzone-multiple p-0" id="my-awesome-dropzone" data-dropzone="data-dropzone" action="#!">
  <div class="fallback"><input name="file" type="file" multiple="multiple" /></div>
  <div class="dz-message" data-dz-message="data-dz-message"> <img class="me-2" src="../../../assets/img/icons/cloud-upload.svg" width="25" alt="" />Drop your files here</div>
  <div class="dz-preview dz-preview-multiple m-0 d-flex flex-column">
    <div class="d-flex media mb-3 pb-3 border-bottom btn-reveal-trigger"><img class="dz-image" src="../../../assets/img/generic/image-file-2.png" alt="..." data-dz-thumbnail="data-dz-thumbnail" />
      <div class="flex-1 d-flex flex-between-center">
        <div>
          <h6 data-dz-name="data-dz-name"></h6>
          <div class="d-flex align-items-center">
            <p class="mb-0 fs--1 text-400 lh-1" data-dz-size="data-dz-size"></p>
            <div class="dz-progress"><span class="dz-upload" data-dz-uploadprogress=""></span></div>
          </div><span class="fs--2 text-danger" data-dz-errormessage="data-dz-errormessage"></span>
        </div>
        <div class="dropdown font-sans-serif"><button class="btn btn-link text-600 btn-sm dropdown-toggle btn-reveal dropdown-caret-none" type="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><span class="fas fa-ellipsis-h"></span></button>
          <div class="dropdown-menu dropdown-menu-end border py-2"><a class="dropdown-item" href="#!" data-dz-remove="data-dz-remove">Remove File</a></div>
        </div>
      </div>
    </div>
  </div>
</form>
فایل css
<link href="vendors/dropzone/dropzone.min.css" rel="stylesheet" />
جاوا اسکریپت
<script src="vendors/dropzone/dropzone.min.js"></script>

ممنون که با فالکون خلق کردید

نسخه 3.4.0

تنظیمات

سبک سفارشی خود را تنظیم کنید

طرح رنگ بندی

حالت رنگ مناسب را برای برنامه خود انتخاب کنید.


RTL حالت

جهت زبان خود را تغییر دهید

RTL راهنما

چیدمان سیال

سیستم چیدمان کانتینر را تغییر دهید

راهنما سیال

موقعیت ناوبری

یک سیستم ناوبری مناسب برای برنامه وب خود انتخاب کنید


سبک نوار ناوبری عمودی

برای نوار ناوبری عمودی خود بین سبک ها جابه جا شوید

دیدن راهنما

چیزی که میبینی را دوست داری؟

برای خرید قالب فالکون از راستچین اقدام کنید.

خرید
شخصی سازی