HTML fayl yuklash: input type="file", accept va multipart/form-data

Qisqacha: Fayl tanlash maydoni — <input type="file">. Fayl serverga haqiqatan yetib borishi uchun formada ikki shart bor: method="post" va enctype="multipart/form-data". Aks holda faqat fayl nomi yuboriladi. accept dialogda kerakli fayl turlarini ko'rsatadi, multiple bir nechta fayl tanlashga ruxsat beradi, capture esa telefonda kamerani to'g'ridan-to'g'ri ochadi. Hajm va tur cheklovlarini baribir server tekshiradi.

Bu darsda

• Formaga fayl tanlash maydonini qo'sha olasiz.
• Nega fayl uchun multipart/form-data kerakligini HTTP so'rov misolida tushuntira olasiz.
• accept, multiple va capture atributlarini to'g'ri ishlata olasiz.
• Fayl hajmini HTML cheklay olmasligini va buni kim qilishini bilasiz.
• Fayl yuklash qanday buzilishi mumkinligini va server nimani tekshirishini bilasiz.

Oldin bilishingiz kerak: Tugmalar va yuborish, Matnli va binar fayllar, HTTP sarlavhalari, MIME turlari, cookie va kesh.

1. Nega bu kerak?

«Bahor» choyxonasi yangi qoida kiritdi. Tug'ilgan kunlar va 10 kishidan katta tadbirlar uchun 100 000 so'm oldindan to'lov olinadi. Mehmon Click yoki Payme orqali to'laydi. Keyin to'lov chekining rasmini administratorga ko'rsatishi kerak.

Hozir bu qanday ishlaydi? Mehmon chek rasmini Telegram'da administratorga yuboradi. Administrator uni ro'yxatdagi band qilish bilan qo'lda moslashtiradi. Kuniga 30 ta tadbir bo'lsa — chalkashlik tayyor: "Bu chek qaysi Malikaniki edi?"

Yaxshiroq yo'l: chek rasmi band qilish formasining o'zida, ism va sana bilan birga kelsin. Buning uchun formaga fayl yuklash maydoni kerak.

2. Fayl tanlash maydoni

2.1 Birinchi maydon

<label for="chek">To'lov cheki</label>
<input type="file" id="chek" name="chek">

Kompyuterda maydon tugma va yozuvdan iborat: "Choose File — No file chosen" ("Fayl tanlang — fayl tanlanmagan"). Brauzer tiliga qarab yozuv boshqacha bo'ladi. Tugma bosilganda operatsion tizimning fayl tanlash oynasi ochiladi.

Telefonda esa kichik menyu chiqadi: galereya, kamera yoki fayllar. Mehmon chek skrinshotini galereyadan tanlaydi.

Fayl tanlangach, "No file chosen" o'rniga fayl nomi yoziladi: chek.png.

2.2 Maydonga qiymat yozib bo'lmaydi

Boshqa maydonlarda value bilan boshlang'ich qiymat bergan edik. Fayl maydonida bu ishlamaydi:

<input type="file" id="hujjat" name="hujjat">

Unga value="C:/Users/Ali/passport.jpg" yozsangiz ham, brauzer uni e'tiborsiz qoldiradi. Sabab — xavfsizlik. Aks holda har qanday sayt sizning kompyuteringizdan istalgan faylni jimgina olib keta olardi. Faylni faqat foydalanuvchining o'zi tanlaydi.

Qiziq detal: JavaScript fayl maydonining qiymatini so'rasa, brauzer C:\fakepath\chek.png deb javob beradi. "fakepath" — "soxta yo'l". Brauzer faylning haqiqiy joyini ataylab yashiradi: sayt sizning papkalaringiz nomini ham bilmasligi kerak.

3. Fayl serverga qanday boradi

3.1 Tajriba: GET bilan

«Bahor» formamizni hozircha GET bilan yuborayotgan edik. Unga fayl maydonini qo'shib, sinab ko'raylik:

Noto'g'ri:

<form action="https://example.com/bron" method="get">
  <label for="ism">Ismingiz</label>
  <input type="text" id="ism" name="ism">
  <label for="chek">To'lov cheki</label>
  <input type="file" id="chek" name="chek">
  <button type="submit">Band qilish</button>
</form>

Malika chek rasmini tanlab, yubordi. Manzil qatorida:

https://example.com/bron?ism=Malika&chek=chek.png

Faqat fayl nomi ketdi. Rasmning o'zi — yo'q.

Nega? GET'da hamma ma'lumot URL'ga yoziladi. URL esa qisqa matn. Matnli va binar fayllar darsida ko'rgan edik: rasm — binar fayl, ya'ni matn emas, baytlar ketma-ketligi. Minglab baytni URL'ga tiqib bo'lmaydi. Brauzer boshqa ilojini topolmay, faqat nomni yuboradi.

3.2 Tajriba: POST bilan

method="post" qilsak-chi? POST'da ma'lumot URL'da emas, so'rov tanasida (body) boradi. HTTP metodlari darsida buni ko'rgan edik.

<form action="https://example.com/bron" method="post">

Natija — yana faqat nom. So'rov tanasida:

ism=Malika&chek=chek.png

Sababi — kodlash usuli. Forma qanday ishlaydi darsida ko'rgan edik: sukut bo'yicha forma ma'lumotni ism=Malika&chek=... ko'rinishidagi bitta uzun satrga aylantiradi — application/x-www-form-urlencoded. Bu usul faqat matn uchun yaratilgan, fayl uchun joyi yo'q.

3.3 Yechim: enctype="multipart/form-data"

O'sha darsda enctype (kodlash turi) ning ikkinchi qiymatini "fayl uchun" deb eslatib o'tgan edik. Endi uning navbati keldi — multipart/form-data:

<form action="https://example.com/bron" method="post"
      enctype="multipart/form-data">
  <label for="ism">Ismingiz</label>
  <input type="text" id="ism" name="ism">
  <label for="chek">To'lov cheki</label>
  <input type="file" id="chek" name="chek">
  <button type="submit">Band qilish</button>
</form>

"Multipart" — "ko'p qismli". Pochtadagi posilkani tasavvur qiling: bitta katta qutida bir nechta alohida o'ralgan paket. Har paketning ustida yorliq bor: ichida nima borligi. Birida xat, birida rasm — har biri o'z holicha, aralashib ketmaydi.

3.4 So'rovning ichiga qaraymiz

Malika formani yubordi. Client–server modeli va HTTP xabari darsida ko'rgan formatda so'rov shunday ko'rinadi (qisqartirilgan):

POST /bron HTTP/1.1
Host: example.com
Content-Type: multipart/form-data; boundary=----WebKitFormBoundaryuJDZipQwgxCvcNRB

------WebKitFormBoundaryuJDZipQwgxCvcNRB
Content-Disposition: form-data; name="ism"

Malika
------WebKitFormBoundaryuJDZipQwgxCvcNRB
Content-Disposition: form-data; name="chek"; filename="chek.png"
Content-Type: image/png

(bu yerda rasmning baytlari keladi)
------WebKitFormBoundaryuJDZipQwgxCvcNRB--

Keling, qatorma-qator ko'ramiz:

• boundary — "chegara". Brauzer har safar tasodifiy uzun satr o'ylab topadi. U qismlarni bir-biridan ajratadi — posilkadagi paketlar orasidagi to'siq kabi. Tasodifiy bo'lgani uchun u faylning ichida uchrab qolmaydi.
• Birinchi qism — oddiy maydon: name="ism", keyin bo'sh qator, keyin qiymat Malika.
• Ikkinchi qism — fayl. Unda filename="chek.png" va Content-Type: image/png bor. Bu MIME turi — "ichida PNG rasm bor" degan yorliq. Keyin faylning baytlari o'zgarishsiz keladi.
• Oxirgi chegara oxirida -- bor. Bu "qismlar tugadi" degani.

Bu so'rovni o'z ko'zingiz bilan ko'rishingiz mumkin: DevTools → Network paneli → so'rovni tanlang → Payload yorlig'i (Chrome DevTools II darsida ko'rgan panel).

3.5 Uchta kodlash usuli — eslatma

text/plain ma'lumotni ism=Malika kabi oddiy qatorlarga yozadi, hech narsani kodlamaydi. Qiymatda = yoki yangi qator bo'lsa, server uni to'g'ri ajrata olmaydi. Shuning uchun u faqat "nima yuborilyapti?" deb qarash uchun.

Qoida — bitta gap: formada fayl bo'lsa, method="post" va enctype="multipart/form-data".

Tekshirib ko'ring: Formada method="post" bor, enctype yo'q. Mehmon 3 MB lik rasm tanladi. Serverga necha bayt rasm boradi?

4. Qanday fayllar: accept

Chek uchun rasm yoki PDF kerak. Mehmon tasodifan Word hujjati yoki video tanlamasin. Buning uchun accept atributi:

<label for="chek">To'lov cheki (rasm yoki PDF)</label>
<input type="file" id="chek" name="chek"
       accept="image/png,image/jpeg,.pdf">

accept ga vergul bilan ajratilgan ro'yxat yoziladi. Unda uch xil yozuv bo'lishi mumkin:

Guruhlar: image/* — har qanday rasm, video/* — video, audio/* — audio.

accept nima qiladi?

• Kompyuterda fayl tanlash oynasida faqat mos fayllar ko'rinadi.
• Telefonda accept="image/*" bo'lsa, menyuda galereya va kamera chiqadi — fayllar bo'limi orqaga suriladi.

Diqqat: accept — cheklov emas, maslahat. Kompyuterdagi oynada "All files" ("Barcha fayllar") filtri bor — foydalanuvchi uni tanlab, istalgan faylni yuklaydi. Brauzer bunga to'sqinlik qilmaydi. Haqiqiy tekshiruv — faqat serverda (pastdagi "Hujumchi nigohi" bo'limida).

5. Bir nechta fayl: multiple

Tug'ilgan kun uchun mehmon zal bezagiga namuna rasmlarini yubormoqchi — ikki-uch dona:

<label for="namuna">Bezak namunalari (bir nechta rasm)</label>
<input type="file" id="namuna" name="namuna"
       accept="image/*" multiple>

multiple — boolean atribut. Endi oynada Ctrl bilan (telefonda — belgilab) bir nechta fayl tanlash mumkin. Maydonda "3 files" ("3 ta fayl") deb yoziladi.

So'rovda har bir fayl alohida qism bo'lib boradi, name esa bir xil:

Content-Disposition: form-data; name="namuna"; filename="bezak-1.jpg"
...
Content-Disposition: form-data; name="namuna"; filename="bezak-2.jpg"

Xuddi checkbox'lar guruhi kabi: bitta nom, bir nechta qiymat. Server buni ro'yxat sifatida o'qishi kerak — aks holda faqat birinchi yoki oxirgi faylni oladi.

Maslahat: Fayl maydonini bo'sh qoldirib yuborsangiz ham, multipart so'rovda u uchun qism bo'ladi — filename="" va bo'sh tana bilan. Server "fayl bor" deb o'ylamasligi uchun faylning nomi va hajmini tekshiradi.

6. Telefonda kamera: capture

Ba'zan fayl emas, hozirgina olingan surat kerak. Masalan, «Bahor» kuryeri buyurtmani topshirganini isbotlash uchun eshik oldida surat oladi:

<label for="isbot">Topshirilganini suratga oling</label>
<input type="file" id="isbot" name="isbot"
       accept="image/*" capture="environment">

capture telefonda galereya menyusini o'tkazib yuborib, kamerani to'g'ridan-to'g'ri ochadi:

Kompyuterda capture e'tiborsiz qoldiriladi — oddiy fayl tanlash oynasi ochiladi.

Muhim tomoni: capture bor bo'lsa, telefon foydalanuvchisi galereyadan tanlay olmaydi. Shuning uchun chek skrinshoti uchun capture qo'ymaymiz — skrinshot allaqachon galereyada turibdi. capture faqat "hozir, shu yerda suratga ol" kerak bo'lganda.

7. Fayl hajmi: HTML cheklay olmaydi

Zamonaviy telefon surati 3–8 MB bo'ladi, video esa yuzlab MB. Serverga 2 GB video kelib qolmasligi uchun hajmni cheklash kerak.

HTML'da buning uchun atribut yo'q. max-size yoki maxsize degan narsa mavjud emas. Hajmni ikki joyda tekshirish mumkin:

1. Brauzerda, JavaScript bilan — fayl tanlangan zahoti, yuborishdan oldin. Foydalanuvchi 3 daqiqa kutib, keyin "fayl juda katta" xabarini olmaydi. Buni Faylni o'qish va oldindan ko'rish darsida qilamiz.
2. Serverda — majburiy. Masalan, keng tarqalgan Nginx serveri sukut bo'yicha 1 MB dan katta so'rovni qabul qilmaydi va 413 status kodini qaytaradi. Uning rasmiy nomi — Content Too Large, "Kontent juda katta". Eski nomi — Request Entity Too Large, Nginx sahifasida hanuz shunday yoziladi. HTTP status kodlari darsidagi 4xx guruhidan: "xato mijoz tomonida".

HTML'da esa bitta foydali ish qilamiz: cheklovni foydalanuvchiga oldindan aytamiz:

<label for="chek">To'lov cheki (PNG, JPG yoki PDF, 5 MB gacha)</label>
<input type="file" id="chek" name="chek"
       accept="image/png,image/jpeg,.pdf">

Mehmon 12 MB lik faylni tanlab, keyin xato olishidan ko'ra, yozuvni o'qib, kichikroq skrinshot olgani yaxshi.

Bo'sh joyni to'ldiring: serverga juda katta fayl yuborilganda qaytadigan status kodi:

8. «Bahor»: formaga chek maydonini qo'shamiz

Endi formamiz haqiqiy ko'rinishiga keldi. Fayl bor ekan, GET bilan yuborib bo'lmaydi — forma POST'ga o'tadi. Natijani endi manzil qatorida emas, DevTools'ning Network panelida ko'rasiz.

<form action="https://example.com/bron" method="post"
      enctype="multipart/form-data">
  <!-- ... ism, telefon, sana, vaqt, odam, joy ... -->

  <p>
    <label for="chek">
      To'lov cheki (faqat tadbirlar uchun; PNG, JPG yoki PDF,
      5 MB gacha)
    </label>
    <input type="file" id="chek" name="chek"
           accept="image/png,image/jpeg,.pdf">
  </p>

  <p>
    <label for="namuna">Bezak namunalari (ixtiyoriy)</label>
    <input type="file" id="namuna" name="namuna"
           accept="image/*" multiple>
  </p>

  <p>
    <button type="submit" name="amal" value="band">
      Band qilish
    </button>
  </p>
</form>

Qarorlar:

• method="post" va enctype="multipart/form-data" — fayl haqiqatan yetib borishi uchun.
• Chek: aniq turlar (image/png,image/jpeg,.pdf), capture yo'q — skrinshot galereyada.
• Namunalar: har qanday rasm, multiple bilan.
• Cheklovlar label'da yozilgan — mehmon oldindan biladi.

9. Hujumchi nigohi

Fayl yuklash — saytga kiradigan eng xavfli eshiklardan biri. Oddiy maydonga hujumchi matn yozadi. Bu yerda esa u serveringizga butun fayl tashlaydi.

Hujum 1: soxta tur. Hujumchi virus.exe ni chek.jpg deb qayta nomlaydi. accept="image/jpeg" uni to'xtatmaydi: nomi .jpg bilan tugaydi. Brauzer Content-Type ni ham fayl kengaytmasiga qarab qo'yadi va image/jpeg deb yuboradi. So'rovdagi hamma yorliq "bu rasm" deydi — ichida esa dastur.

Hujum 2: soxta nom. filename ni brauzer emas, hujumchi yozishi mumkin — so'rovni qo'lda yasab. Masalan, filename="../../index.html". Server faylni shu nom bilan saqlasa, ../ (Yo'llar darsidagi "bir papka yuqoriga") uni kutilmagan joyga — hatto saytning bosh sahifasi o'rniga yozib yuborishi mumkin.

Hujum 3: ulkan fayl. Minglab 2 GB lik so'rov server diskini to'ldiradi va sayt to'xtaydi.

Hujum 4: HTML yoki SVG "rasm". SVG — matnli fayl va uning ichida skript bo'lishi mumkin (SVG darsida ko'rgan format). Server uni saytning o'z domenida ochib bersa, skript boshqa foydalanuvchilarning brauzerida ishga tushadi.

Himoya — hammasi serverda:

• Haqiqiy turni baytlardan aniqlash. Har bir format o'ziga xos baytlar bilan boshlanadi. PNG fayl doim 89 50 4E 47 baytlari bilan boshlanadi — oxirgi uchtasi harflarda "PNG". O'n oltilik sanoq sistemasi darsidagi yozuvni eslang. Bu sehrli baytlar (magic bytes) deyiladi. Nom va Content-Type ga emas, shularga ishoniladi.
• Hajm chegarasi — so'rov qabul qilinishidan oldin.
• Nomni tashlab yuborish. Fayl tasodifiy yangi nom bilan saqlanadi: a7f3c9e1.png. Foydalanuvchi bergan nomga umuman tayanilmaydi.
• Alohida joyda saqlash — saytning o'z fayllari yonida emas, alohida xizmatda yoki domenda.

Bularning hammasini backend qismida o'zingiz yozasiz: Fayl yuklash: multipart va Multer va Fayl yuklash xavfsizligi darslarida. HTML'dagi accept esa — faqat halol foydalanuvchiga qulaylik.

10. Ko'p uchraydigan xatolar

10.1 enctype unutilgan

Eng ko'p uchraydigan xato. Forma "ishlaydi", xato chiqmaydi, lekin serverga faqat fayl nomi boradi. Tuzatish: enctype="multipart/form-data". Tekshirish: Network → Payload — u yerda fayl qismini filename= bilan ko'rishingiz kerak.

10.2 method="get" bilan fayl

enctype yozilgan bo'lsa ham, GET'da u e'tiborsiz qoldiriladi — URL'ga faqat nom yoziladi. Tuzatish: method="post".

10.3 accept ni himoya deb o'ylash

"accept="image/*" qo'ydim, demak faqat rasm keladi." Yo'q — "All files" filtri yoki qo'lda yasalgan so'rov uni aylanib o'tadi. Tuzatish: serverda baytlar bo'yicha tekshirish.

10.4 capture galereyani yopib qo'ydi

Chek yoki hujjat skrinshoti uchun capture qo'yilgan — telefon foydalanuvchisi tayyor rasmni tanlay olmaydi. Tuzatish: capture ni faqat "hozir suratga ol" holatida ishlating.

10.5 Cheklovlar yashirilgan

Mehmon 10 MB lik faylni tanlaydi, uzoq kutadi va 413 xatosini oladi — nima uchun ekanini bilmaydi. Tuzatish: ruxsat etilgan turlar va hajmni label'da yozing.

11. Mashqlar

1-mashq (oson): accept ni yozing

Har bir holat uchun accept qiymatini yozing:

1. Faqat PDF hujjat.
2. Har qanday rasm.
3. Rezyume: PDF yoki Word (.docx).
4. Faqat PNG va JPEG rasmlar (MIME turlari bilan).

2-mashq (o'rta): Nima yuboriladi?

Har bir forma uchun ayting: serverga faylning o'zi boradimi yoki faqat nomi?

1. <form method="get" enctype="multipart/form-data">
2. <form method="post">
3. <form method="post" enctype="multipart/form-data">
4. <form> (atributsiz)

• Faylning o'zi faqat nechanchi formada boradi?

3-mashq (qiyin): Ishga ariza formasi

«Bahor» oshpaz yordamchisi qidiryapti. ish/index.html sahifasi uchun forma yozing:

• Ism (matn) va telefon (tel).
• Rezyume: faqat PDF, bitta fayl, 2 MB gacha (cheklovni foydalanuvchiga ayting).
• O'zi tayyorlagan taomlarning rasmlari: istalgan rasm, bir nechta, ixtiyoriy.
• Selfi: telefonda old kamera to'g'ridan-to'g'ri ochilsin.
• Bitta yuborish tugmasi.

Fayllar haqiqatan serverga yetib borishi kerak.

<form action="https://example.com/ish" method="post"
      enctype="multipart/form-data">
  <p>
    <label for="ism">Ismingiz</label>
    <input type="text" id="ism" name="ism">
  </p>
  <p>
    <label for="telefon">Telefon</label>
    <input type="tel" id="telefon" name="telefon">
  </p>
  <p>
    <label for="rezyume">Rezyume (faqat PDF, 2 MB gacha)</label>
    <input type="file" id="rezyume" name="rezyume"
           accept=".pdf">
  </p>
  <p>
    <label for="taomlar">Taomlaringiz rasmlari (ixtiyoriy)</label>
    <input type="file" id="taomlar" name="taomlar"
           accept="image/*" multiple>
  </p>
  <p>
    <label for="selfi">Selfi</label>
    <input type="file" id="selfi" name="selfi"
           accept="image/*" capture="user">
  </p>
  <button type="submit">Ariza yuborish</button>
</form>

12. Real ishda

• Hamma joyda: Telegram'da rasm yuborish, OLX'da e'lon rasmlari, hh.uz'da rezyume, davlat xizmatlari portalida hujjat nusxasi. Ularning hammasi ostida o'sha multipart/form-data turadi.
• Chiroyli yuklash oynalari. Katta saytlar faylni sudrab tashlash, rasmni oldindan ko'rsatish va yuklanish foizini ko'rsatadi. Bular JavaScript bilan quriladi (Fayl yuklash va progress, Drag and Drop API). Lekin ichida baribir input type="file" va o'sha so'rov turadi.
• Katta fayllar ko'pincha server orqali emas, to'g'ridan-to'g'ri fayl omboriga (masalan, Amazon S3 — kursda alohida o'rganamiz) yuklanadi. Server faqat "ruxsatnoma" beradi.
• Intervyuda: "Nega fayl yuklashda multipart/form-data kerak?" va "accept xavfsizlikni ta'minlaydimi?" — ko'p so'raladi. Birinchisiga — "urlencoded faqat matn tashiydi", ikkinchisiga — "yo'q, faqat server".

Xulosa

• Fayl maydoni — <input type="file">; unga value bilan fayl qo'yib bo'lmaydi, faqat foydalanuvchi tanlaydi.
• Fayl yetib borishi uchun: method="post" + enctype="multipart/form-data"; aks holda faqat nom ketadi.
• multipart so'rov boundary bilan ajratilgan qismlardan iborat; fayl qismida filename va MIME turi bor.
• accept — dialog uchun maslahat, cheklov emas; multiple — bir nechta fayl; capture — telefonda kamera, galereyasiz.
• HTML fayl hajmini cheklay olmaydi: cheklovni label'da ayting, tekshiruvni server (va JS) qiladi.
• Fayl turi, nomi va hajmi — faqat serverda, sehrli baytlar bo'yicha tekshiriladi.

Keyingi dars: Maydon holatlari va yashirin maydonlar — disabled va readonly farqi, foydalanuvchiga ko'rinmaydigan hidden maydonlar va forma tashqarisidagi tugma.

Manbalar

• MDN: <input type="file">, accept va capture atributlari — developer.mozilla.org
• MDN: "Sending form data" (enctype va multipart) — developer.mozilla.org
• RFC 7578: "Returning Values from Forms: multipart/form-data" — rfc-editor.org
• OWASP: "File Upload Cheat Sheet" — cheatsheetseries.owasp.org