آپلود کردن یک یا چند فایل + نمایش درصد آپلود

قبل از هرچیزی لازم است شما چند نکته را در مورد آپلود کردن فایل های خود بدانید

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

نمایش درصد پیشرفت آپلود بسیار زیبا و حرفه ای است پس حتما این کار را انجام دهید

هیچوقت نباید همزمان چند فایل را بارگذاری کرد زیرا اگر در هنگام آپلود خطایی رخ دهد هیچکدام از فایل های شما بارگذاری نخواهد شد

بهتر است آپلود همزمان چند فایل به ترتیب انجام شود و بعد از اتمام آپلود یک فایل آپلود فایل بعدی شروع شود

معرفی و آموزش پلاگین webJungle Uploader

هدف ما ایجاد یک پلاگین حرفه ای برای ارسال آسان فایل های شما به سمت سرور می باشد، در این بین امکان نمایش درصد آپلود، آپلود فایل ها با درگ و دراپ و حتی کنسل کردن فایل های آپلودی را قرار دادیم. در حال حاضر نسخه jQuery این پلاگین آماده استفاده می باشد.

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

نسخه تست آنلاین پلاگین آماده شده است تا از امکانات سامانه آگاه شوید در ادامه آموزش پلاگین را قرار داده ایم.

توصیه می شود قبل از انجام تست سرعت مرورگر خود را کاهش دهید تا روند بارگزاری فایل ها را با سرعت پایین تری مشاهده کنید، برای انجام این کار میتوانید آموزش زیر را مطالعه کنید.

انتخاب یک فایل انتخاب چند فایل

فرض کنید میخواهیم با کلیک بر روی یک المنت span کار آپلود را انجام دهیم. این span را هرجایی میتوانید قرار دهید حتی در داخل یک form

برای شروع کار ابتدا خطوط زیر را به پروژه خود اضافه کنید

<script src="https://cdn.webjungle.ir/jquery/jquery-3.5.1.min.js"></script>
<script src="https://cdn.webjungle.ir/uploader/webjungle-uploader-1.0.0.min.js"></script>

برای بازشدن پنجره انتخاب فایل باید به المنت خود upload را اضافه کنیم، در اینصورت پنجره شما با ویژگی های پیشفرض باز خواهد شد و شما میتوانید فایل های خود را جهت آپلود انتخاب کنید

<span upload>بارگذاری فایل</span>

همچنین میتوانید با اضافه کردن upload-drop فایل های خود را به محدوده مورد نظر بکشید و عملیات آپلود را شروع کنید

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

برای این کار upload-drag را به المنت خود اضافه کنید و مقدار آن را برابر با کلاس مورد نظر خود قرار دهید در اینصورت در هنگام درگ کردن کلاس شما به المنت اضافه میشود و در هنگام خروج از محدوده نیز کلاس شما از المنت حذف می شود.

<div upload-drop upload-drag="my-css-class">فایل خود را به اینجا بکشید</span>

انتخاب فایل میتواند به دو صورت تکی و چندتایی انجام شود و برای تنظیم آن میتوانید از upload-multiple استفاده کنید

<div>
  <span upload upload-multiple="false">انتخاب فایل</span>
  <span upload upload-multiple="true">انتخاب فایل ها</span>
</div>

برای مشخص کردن نوع فایل ها از upload-accept استفاده کنید

<div>
  <span upload upload-accept="image/*">انتخاب تصویر</span>
  <span upload upload-accept="audio/*">انتخاب موسیقی</span>
  <span upload upload-accept="video/*">انتخاب ویدیو</span>
</div>

با استفاده از upload-url مسیر آپلود فایل ها را مشخص میکنیم

<span upload upload-url="/upload">بارگذاری فایل</span>

متد پیشفرض درخواست POST می باشد برای تغییر آن از upload-method استفاده کنید.

<div>
  <span upload upload-url="/upload" upload-method="get">GET</span>
  <span upload upload-url="/upload" upload-method="post">POST</span>
  <span upload upload-url="/upload" upload-method="put">PUT</span>
  <span upload upload-url="/upload" upload-method="delete">DELETE</span>
</div>

اگر میخواهید در درخواست آپلود خود پارامترهای دیگری هم ارسال کنید میتوانید از upload-key استفاده کنید و به input هایی که قصد ارسال مقدار آن ها را دارید یک attribute اضافه کنید این attribute همان مقدار upload-key می باشد.

علاوه بر مقادیر شما مقدار upload-key هم در پارامتر ها ارسال میشود.

<span upload upload-key="send-params">بارگذاری فایل</span>

<textarea send-params name="title">وب جانگل</textarea>
<textarea send-params name="link">https://webjungle.ir</textarea>
<select send-params name="type">
  <option selected value="website">سایت</option>
</select>

پارامترهای ارسالی به شکل زیر است

{
  "uploadKey": "upload-test",
  "title": "وب جانگل",
  "link": "https://webjungle.ir",
  "type": "website"
}

برای عزیزانی که از لاراول استفاده میکنند لازم است در درخواست های خود csrf-token را ارسال کنند برای این کار کافیست به پروژه خود متای زیر را اضافه کنید.

<meta name="csrf-token" content="<?php echo csrf_token(); ?>"/>

در ادامه event های پلاگین را معرفی و آموزش میدهیم

بعد از انتخاب فایل ها رویداد upload-added-files اجرا می شود که متدی که شما معرفی میکنید را اجرا میکند که ورودی آن فایل های انتخابی شما می باشد

<span upload upload-added-files="onAddedFiles">بارگذاری فایل</span>

<script>
  function onAddedFiles(files) {
    // your code here
  }
</script>

نمونه آرایه فایل ها بصورت زیر می باشد. توجه کنید که بارگذاری فایل ها به ترتیب انجام می شود و اگر در هنگام آپلود مجددا فایل هایی را انتخاب کنید به آخر صف اضافه میشوند

[
  {
    "id": "i0",
    "file": {
      "lastModified": 1607150022739,
      "lastModifiedDate": "Sat Dec 05 2020 10:03:42 GMT+0330 (Iran Standard Time)",
      "name": "file-0.jpg",
      "size": 245,
      "type": ""
      "webkitRelativePath": ""
  },
  {
    "id": "i1",
    "file": {
      "lastModified": 160715003529,
      "lastModifiedDate": "Sat Dec 05 2020 10:03:42 GMT+0330 (Iran Standard Time)",
      "name": "file-1.jpg",
      "size": 1250,
      "type": ""
      "webkitRelativePath": ""
  }
]

با توجه به آرایه بالا شما میتوانید از پارامتر id برای نمایش درصد پیشرفت استفاده کنید برای این کار از upload-progress استفاده میکنیم

<span upload upload-progress="onProgress">بارگذاری فایل</span>

<script>
  function onProgress(id, percent) {
    // your code here
  }
</script>

در اینجا id همان شناسه ای است که در هنگام اضافه کردن فایل ها به ما داده شد

percent هم عددی بین 0 تا 100 می باشد که درصد پیشرفت را نشان میدهد

در نهایت بعد از اتمام آپلود هر فایل upload-complete اجرا می شود که وضعیت و اطلاعات را به ما بازمیگرداند.

<span upload upload-complete="onComplete">بارگذاری فایل</span>

<script>
  function onComplete(status, id, data) {
    // your code here
  }
</script>

status وضعیت آپلود را به ما باز میگرداند که بصورت success و error می باشد.

id همان شناسه آپلود می باشد که قبلا گفته شد

data خروجی شما در سمت سرور می باشد که شما خودتان تنظیم میکنید. برای مثال میتوانید مسیر ذخیره فایل و اطلاعات دیگری را بازگردانید

برای لغو کردن روند آپلود و یا حذف یک آیتم از لیست آپلود از upload-cancel استفاده کنید، مقدار ورودی آن id می باشد.

<span upload-cancel="i0">بارگذاری فایل</span>