JavaScript-dagi FileList API nimaga qodir va undan qanday foydalanish mumkin.

FileList API foydalanuvchi tanlagan faylni toʻliq nazorat qilish imkonini beradi va shu bilan siz faylni tekshirishni amalga oshirishingiz mumkin.

Men sizga FileList API yordamida faylda tekshirishingiz mumkin bo'lgan ba'zi narsalarni ko'rsataman.

Menda quyida fayl kiritishim bor deylik:

HTML sahifamni qayta yuklaganimda va ba'zi rasmlarni tanlaganimda, tanlangan fayllarni ob'ekt sifatida shu tarzda olaman.

Mana oldindan ko'rish:

Fayllar ro'yxati boshqa xususiyatlarga ega bo'lgan ob'ekt ekanligini ko'rishingiz mumkin.

FileList obyekti ichida:

  • Foydalanuvchi tomonidan tanlangan fayllar sonini length xususiyati orqali olishingiz mumkin.
  • Tanlangan fayl haqida koʻproq maʼlumotni 0...(length - 1) raqamli indeks yordamida olishingiz mumkin.

Yuqoridagi rasmdan siz uzunligi 6 ekanligini ko'rishingiz mumkin va bu foydalanuvchi 6 ta faylni tanlaganligini anglatadi. Shunday qilib, fayllar 0 dan (6–1) gacha, ya'ni 0 dan 5 gacha indeksni oladi.

Agar foydalanuvchi tanlagan har bir faylni aylanib chiqmoqchi bo'lsangiz, bu foydali bo'ladi.

FileList API ob'ekt xususiyatlari

Keling, tanlangan fayl tarkibidagi xususiyatlar haqida ko'proq gaplashaylik.

  • oxirgi tahrirlangan timestamp

Bu vaqt tamg'asi sifatida taqdim etilgan faylning oxirgi o'zgartirish sanasi.

Sana ustidan nazorat qilish uchun vaqt belgisini Sana konstruktoriga o'tkazing.

  • oxirgi tahrirlangan sana Date

Bu fayl oxirgi marta o'zgartirilgan to'liq sana.

  • ism string

Bu fayl nomi.

  • o'lcham integer

Bu baytdagi fayl hajmi.

  • string yozing

Bu faylning MIME turi.

Xulosa qilish uchun bu erda FileList API xususiyatlarini ko'rsatadigan rasm:

Fayllar orqali aylanish

Keling, foydalanuvchi tomonidan tanlangan fayllarning har birini qanday qilib ko'rib chiqishimiz va ular bo'yicha tekshirishlarni amalga oshirishimiz mumkinligini bilib olaylik.

FileList Api ob'ekt sifatida ma'lumotlarni taqdim etadi, shuning uchun biz ushbu ob'ekt orqali o'tadigan va kerakli ma'lumotlarni oladigan tsiklni yozishimiz kerak.

Agar siz JavaScript-da ob'ektni qanday aylantirish haqida oldingi maqolamni tekshirmagan bo'lsangiz, "bu erda maqolaga havola".

Yuqoridagi kodni bajarganingizda, biz ob'ektni aylanib o'tishimiz va har bir faylni chiqarishimiz mumkinligini ko'rasiz.

Endi biz fayllarni tekshirishga tayyormiz.

Tasdiqlash

Hajmi tasdiqlash

Eslatib o'tamiz, ma'lum bir faylning o'lchami bytes sifatida qaytariladi.

Foydalanuvchiga 2MB dan ortiq bo'lmagan fayllarni tanlashga ruxsat berilgan deb faraz qilsam, men tekshirishni shu tarzda amalga oshiraman.

  • 2MB ni baytga aylantiring.
  • Fayllarni aylantiring va ularning o'lchamlarini saqlang.
  • Umumiy hajmi 2MB dan katta ekanligini tekshiring.

Turni tekshirish

Endi foydalanuvchiga faqat rasm fayllarini tanlashga ruxsat berilgan deb faraz qilsam, men tekshiruvlarimni shunday bajaraman.

  • Tasvir fayli turlarini saqlaydigan massiv yarating.
  • Fayllarni aylantiring va biron bir fayl kerakli turga mos kelmasligini tekshiring.

Qo'llab-quvvatlanmaydigan ba'zi fayllarni tanlaganimda nima sodir bo'ladi.

Fayl kengaytmalarini tekshirish

Oxirgi tasdiqlashim uchun foydalanuvchidan “.png, .jpg, .jpeg” kengaytmali fayllarni taqdim etishini xohlayman va kengaytmaga mos kelmaydigan har qanday fayl qoʻllab-quvvatlanmaydigan fayl turi sifatida belgilanishi mumkin.

Ushbu tasdiqlashni amalga oshirish uchun men:

  • Kerakli fayl kengaytmalarini massivda saqlang.
  • Fayllarni aylanib chiqing va ularning nomlarini oling.
  • Fayl kengaytmasini nomidan chiqarib oling va keyin uni kerakli fayl kengaytmalari bilan solishtiring.

Qo'llab-quvvatlanmaydigan fayllarni tanlaganimda nima sodir bo'ladi:

Umid qilamanki, biz bu erda bajargan kichik mashq bilan siz JavaScript-dagi FileList API nimaga qodirligini, shu jumladan undan qanday foydalanishni to'liq tushuna olasiz.

Men ushbu maqolaga o'z hissangizni qo'shishni istardim.

Qo'shimcha

Men NPM da JavaScript kutubxonasini qurdim va ishga tushirdim, u sizning oldingi shakllaringizni muntazam ifodalar, tekshirish qoidalari va shakl kiritish atributlari yordamida tekshirishga qodir.

Ushbu kutubxona yordamida siz barcha turdagi arizalarni, jumladan, faylni tekshirish va uzunlikni tekshirishni tekshirishingiz mumkin.

  • NPM-da ushbu kutubxonani tekshiring:


oktavalidat
Ushbu kutubxona tasdiqlash qoidalari, murakkab oddiy iboralar va shakl kiritish yordamida HTML shakllaringizni tasdiqlashga yordam beradi…www.npmjs.com



  • GitHub-da ushbu kutubxonani tekshiring:


GitHub - Octagon-simon/octaValidate: Ushbu kutubxona HTML shakllarini… yordamida tekshirishga yordam beradi...
Ushbu kutubxona tasdiqlash qoidalari, murakkab oddiy ifodalar va shakllar yordamida HTML shakllaringizni tasdiqlashga yordam beradi. kiritish…github.com



  • Hujjatlarni ko'rib chiqing:


«octaValidate: Ishga kirishish
HTML shakllarini tekshirish qoidalari, murakkab oddiy…octagon-simon.github.io yordamida tekshirishga yordam beruvchi AJOYIB kutubxonaga Xush kelibsiz.



Rahmat.

Ko'proq kontent PlainEnglish.io sahifasida. Bizning bepul haftalik axborot byulletenimizga obuna bo'ling. Bizni Twitterva LinkedInda kuzatib boring. “Hamjamiyatdagi kelishmovchilik”ni ko‘rib chiqing va “Iste’dodlar jamoasi”ga qo‘shiling.