بارگذاری فایل برای وب (1): آپلود فایل ها با HTML

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

1. آپلود فایل ها با HTML

2. آپلود فایل با جاوا اسکریپت

3. دریافت آپلود فایل با Node.js (Nuxt.js)

4. بهینه سازی هزینه های ذخیره سازی با Object Storage

5. بهینه سازی تحویل با CDN

6. ایمن سازی آپلود فایل با اسکن بدافزار

https://www.youtube.com/watch?v=s2TTck1sj4s

دسترسی به فایل ها

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

روی File System Access API کار در حال انجام است، اما آزمایشی است و دسترسی محدودی خواهد داشت، بنابراین بیایید وانمود کنیم که وجود ندارد.

دسترسی به یک فایل نیاز به تعامل کاربر دارد، به این معنی که ما به چیزی در رابط کاربری نیاز داریم تا کاربر بتواند با آن تعامل داشته باشد. به راحتی، عنصر ورودی با یک فایل وجود دارد type صفت.

<input type="file" />

ورودی فایل به خودی خود چندان مفید نیست. این به کاربر اجازه می دهد تا یک فایل را از دستگاه خود انتخاب کند، اما این در مورد آن است.

برای اینکه واقعاً فایل را به سرور ارسال کنیم، باید یک درخواست HTTP داشته باشیم، به این معنی که به a نیاز داریم <form>. ورودی فایل را به همراه a داخل آن قرار می دهیم <button> برای ارسال فرم ورودی نیز به a نیاز دارد <label> برای دسترسی به آن برای فناوری کمکی، یک id ویژگی برای مرتبط کردن آن با برچسب، و a name ویژگی به منظور گنجاندن داده های آن همراه با درخواست HTTP.

<form>
  <label for="file">File</label>
  <input id="file" type="file" />
  <button>Upload</button>
</form>

به نظر خوب میاد 👍

اگرچه خوب کار نمی کند 👎.

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

اگر هنگام ارسال فرم، برگه شبکه را تماشا کنیم، می‌توانیم ببینیم که یک درخواست GET ایجاد می‌کند، و payload به عنوان یک رشته جستجو ارسال می‌شود که به شکل زیر است:?name=filename.txt“. این در اصل یک جفت کلید-مقدار است که کلید آن ورودی است name و مقدار آن نام فایل است.

این به عنوان یک رشته ارسال می شود.

دقیقاً چیزی نیست که ما اینجا برای آن می رویم.

ما در واقع نمی‌توانیم فایلی را با استفاده از درخواست GET ارسال کنیم زیرا نمی‌توانید فایلی را در پارامترهای رشته query قرار دهید. باید فایل را در بدنه درخواست قرار دهیم. برای انجام این کار، باید یک درخواست POST ارسال کنیم، که می توانیم با تغییر فرم انجام دهیم method نسبت به "post".

<form method="post">
  <label for="file">File</label>
  <input id="file" name="file" type="file" />
  <button>Upload</button>
</form>

حال، اگر آن درخواست را بررسی کنیم، می بینیم که در حال ارسال درخواست پست هستیم. همچنین می‌توانیم ببینیم که درخواست دارای یک باری است که حاوی داده‌های فرم است. متأسفانه، داده ها هنوز فقط یک جفت کلید-مقدار با ورودی هستند name و نام فایل

Content-Type را تنظیم کنید

ما هنوز در واقع فایل را ارسال نمی کنیم و دلیل آن به درخواست مربوط می شود.Content-Type“.

به طور پیش فرض، زمانی که یک فرم ارسال می شود، درخواست با یک ارسال می شود Content-Type از application/x-www-form-urlencoded. و متأسفانه، ما نمی‌توانیم اطلاعات فایل باینری را به عنوان داده‌های کدگذاری شده URL ارسال کنیم.

برای ارسال محتویات فایل به صورت داده باینری، باید آن را تغییر دهیم Content-Type از درخواست به multipart/form-data. و برای انجام این کار، می توانیم فرم را تنظیم کنیم enctype صفت.

<form method="post" enctype="multipart/form-data">
  <label for="file">File</label>
  <input id="file" name="file" type="file" />
  <button>Upload</button>
</form>

حال اگر یک بار دیگر فرم را ارسال کنیم، می‌توانیم ببینیم درخواست از متد POST استفاده می‌کند Content-Type تنظیم کنید multipart/form-data. در مرورگرهای Chromium، دیگر بار درخواست را نمی‌بینید، اما می‌توانید آن را در ابزارهای توسعه‌دهنده فایرفاکس در زیر تب Params درخواست مشاهده کنید.

ما انجامش دادیم!!!

خلاصه

با همه این موارد، می توانیم فایل ها را با استفاده از HTML آپلود کنیم. برای تکرار مجدد، ارسال فایل با HTML به سه چیز نیاز دارد:

1. ایجاد یک ورودی با type فایل برای دسترسی به سیستم فایل.

2. استفاده از فرم با method="post" برای گنجاندن بدن بر اساس درخواست.

3. درخواست را تنظیم کنید Content-Type به multipart/form-data با استفاده از enctype صفت.

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

یک بار دیگر، در اینجا طرح کلی سریال به این صورت است:

1. آپلود فایل ها با HTML

2. آپلود فایل با جاوا اسکریپت

3. دریافت آپلود فایل با Node.js (Nuxt.js)

4. بهینه سازی هزینه های ذخیره سازی با Object Storage

5. بهینه سازی تحویل با CDN

6. ایمن سازی آپلود فایل با اسکن بدافزار

از خواندن این مطلب متشکریم. اگر این مقاله را دوست داشتید، لطفا آن را به اشتراک بگذارید. این یکی از بهترین راه ها برای حمایت از من است. همچنین می توانید در خبرنامه من ثبت نام کنید یا من را در توییتر دنبال کنید اگر می خواهید بدانید مقالات جدید چه زمانی منتشر می شوند.

در ابتدا منتشر شد austingil.com.