پرش به محتوا
بناBana UI

حالت نمایش

پالت رنگی

با ↑ ↓ جابه‌جا شوید و Enter را بزنید. Esc برای بستن.

Upload امن

روی <input type="file"> معمولی ساخته شده است. نوع، حجم و تعداد فایل پیش از هر ارسالی بررسی می‌شود، پیش‌نمایش تصویر نشان داده می‌شود و بارگذاری با نوار پیشرفت، لغو و تلاش مجدد انجام می‌شود. ماژول upload لازم است. نمونه به یک سرور ساختگی داخل همین صفحه وصل است (نام فایلی که شامل «fail» باشد با خطای ۴۱۳ رد می‌شود).

بارگذاری چندفایلی

    کد
    <form data-safe-action action="https://demo.bana.test/api/ticket" method="post" ui="stack" style="max-inline-size:32rem">
      <div ui="upload" data-upload="https://demo.bana.test/api/upload" data-name="attachments" data-accept="image/*,.pdf" data-max-size="2097152" data-max-files="3">
        <label ui="dropzone">
          <input type="file" multiple accept="image/*,.pdf" aria-label="پیوست‌ها">
          <bana-icon name="upload"></bana-icon>
          <strong>فایل‌ها را اینجا رها کنید</strong>
          <span>یا کلیک کنید. تصویر یا PDF، تا ۳ فایل و هرکدام حداکثر ۲ مگابایت</span>
        </label>
        <ul data-upload-list aria-label="فایل‌های پیوست"></ul>
        <p data-upload-status></p>
      </div>
      <button ui="primary" type="submit">ارسال درخواست</button>
    </form>
    انتخاب تکی بدون بارگذاری فوری (همراه فرم)
      کد
      <div ui="upload" data-accept="image/png,image/jpeg" data-max-size="1048576" style="max-inline-size:32rem">
        <label ui="dropzone">
          <input type="file" name="avatar" accept="image/png,image/jpeg" aria-label="تصویر پروفایل">
          <bana-icon name="upload"></bana-icon>
          <strong>تصویر پروفایل</strong>
          <span>PNG یا JPEG، حداکثر ۱ مگابایت. فایل همراه ارسال فرم می‌رود.</span>
        </label>
        <ul data-upload-list aria-label="تصویر انتخاب‌شده"></ul>
      </div>

      در حالت بارگذاری فوری (data-upload) هر فایل جداگانه ارسال می‌شود و شناسه‌ای که سرور برمی‌گرداند ({ "id": "..." }) در یک ورودی مخفی با نام data-name قرار می‌گیرد؛ پس فرم اصلی فقط شناسه‌ها را می‌فرستد، نه بایت‌ها را. بدون data-upload، فایل‌های معتبر در همان input می‌مانند و با ارسال فرم می‌روند. تا پایان بارگذاری، ارسال فرم مسدود است.

      صفت / رویدادکار
      data-acceptمثل accept: image/*، .pdf، application/pdf.
      data-max-size / data-max-filesسقف حجم (بایت) و تعداد؛ فایل رد‌شده با دلیل فارسی نشان داده می‌شود و ارسال نمی‌شود.
      data-upload="/url"نشانی بارگذاری (فقط هم‌مبدأ یا allowOrigins)؛ همراه data-field (نام فیلد، پیش‌فرض file)، data-concurrency، data-timeout.
      bana:upload-add / -reject / -progress / -success / -error / -removeرویدادهای حباب‌شونده با e.detail.file (و data یا reason). در -remove می‌توانید فایل را از سرور هم حذف کنید.
      بررسی سمت مرورگر فقط فیلتر اول است.سرور باید نوع واقعی فایل (نه فقط پسوند و MIME اعلامی)، حجم، مالکیت، ضدویروس و نام ذخیره‌سازی را خودش بررسی کند. نام فایل‌ها فقط با textContent نمایش داده می‌شود و هیچ HTMLای ساخته نمی‌شود.

      ویرایش این صفحه در GitHub