از طریق منوی جستجو مطلب مورد نظر خود در وبلاگ را به سرعت پیدا کنید
آپلود یک فایل با استفاده از جاوا اسکریپت هر صفحه وب امروز بدون بارگیری مجدد به روز می شود page برای ارائه تجربه ای روان به کاربران به روز رسانی a page بدون بارگیری مجدد فقط با استفاده از جاوا اسکریپت امکان پذیر است، زیرا مرورگرهای وب منحصراً جاوا اسکریپت را به عنوان یک زبان برنامه نویسی اجرا می کنند. به طور مشابه، آپلود یک فایل بدون بارگیری مجدد page بدست آمده است…
سرفصلهای مطلب
امروزه هر صفحه وب بدون بارگیری مجدد به روز می شود page برای ارائه تجربه ای روان به کاربران به روز رسانی a page بدون بارگیری مجدد فقط با استفاده از جاوا اسکریپت امکان پذیر است، زیرا مرورگرهای وب منحصراً جاوا اسکریپت را به عنوان یک زبان برنامه نویسی اجرا می کنند.
به طور مشابه، آپلود یک فایل بدون بارگیری مجدد page با جاوا اسکریپت برای اطمینان از تجربه کاربری یکپارچه به دست می آید. آپلود یک فایل با استفاده از جاوا اسکریپت برای موارد زیر مهم است:
-
تعامل وب دو یا چند نفر می‌توانند با ارسال تصاویر، ویدیوها و انواع فایل‌ها به یکدیگر درگیر شوند. به عنوان مثال، می توانید تصاویر را ایمیل کنید و با تصاویر پاسخ دهید روی Gmail به دلیل قابلیت آپلود فایل توسط جاوا اسکریپت.
-
جمع آوری داده های مهم از کاربران گاهی اوقات، ممکن است لازم باشد قبل از اینکه به آنها اجازه دهید از خدمات شما استفاده کنند، هویت آنها را تأیید کنید. می توانید از آنها بخواهید که عکسی از خودشان در حالی که کارت شناسایی خود را در دست دارند آپلود کنند یا به سادگی یک فایل PDF از صورت حساب بانکی خود را آپلود کنند. آپلود فایل با جاوا اسکریپت این امکان را فراهم می کند.
-
داده ها را حفظ کنید. ذخیره‌سازی خاطرات یا اطلاعات مهم به‌عنوان فایل حیاتی است و به ما این امکان را می‌دهد تا فایلی را برای نگهداری در فضای ابری آپلود کنیم.
-
پردازش داده ها برای استخراج محتوا، ویرایش، تمیز کردن و به روز رسانی. جاوا اسکریپت به اندازه کافی قدرتمند است تا وظایف پردازشی پیچیده ای مانند افزودن فیلتر به تصاویر، استخراج متن از تصاویر و غیره را انجام دهد. آپلود یک فایل برای پردازش می تواند به دستیابی به یک هدف خاص کمک کند.
حالا که فهمیدید آپلود فایل با جاوا اسکریپت شامل چه چیزی و هدف آن است، اجازه دهید یک برنامه کاربردی ساده برای نشان دادن process.
یک فرم ساده HTML برای آپلود فایل ایجاد کنید
فرم HTML زیر برای انتخاب یک فایل استفاده خواهد شد.
<form id="fileUploadForm">
<input type="text" name="firstName" value="John" />
File: <input type="file" name="upload" />
<input type="submit" id="btn" />
</form>
سپس در فرم یک داریم input با آن برچسب بزنید type تنظیم کنید file و آن name تنظیم کنید upload. این اجازه می دهد تا انواع مختلف فایل مانند تصاویر، PDF، فیلم ها و غیره را آپلود کنید.
با استفاده از جاوا اسکریپت به فرم دسترسی پیدا کنید
برای دسترسی به یک فرم با استفاده از جاوا اسکریپت و دریافت ورودی های کاربر از آن، چندین روش در دسترس است. در این مثال از کد زیر استفاده می کنیم:
const form = document.getElementById("fileUploadForm");
const submitter = document.getElementById("btn");
اکنون با استفاده از جاوا اسکریپت به کل فرم و ارسال کننده آن دسترسی پیدا کرده ایم. اگر بدوید console.log({form, submitter})، فرم دقیق و ارسال کننده آن را از محتوای اولیه HTML خواهید دید. هنگامی که کاربر یک فایل را انتخاب می کند، می خواهیم فایل انتخابی را با استفاده از FormData سازنده
FormData را در جاوا اسکریپت کاوش کنید
FormData سازنده ای است که یک شی برای ذخیره ورودی های فرم به عنوان جفت کلید/مقدار ایجاد می کند. از ویژگی نام یک تگ ورودی داده شده به عنوان کلید و مقدار وارد شده به عنوان مقدار آن استفاده می کند. سپس می توانیم تمام ورودی های کاربر را از روی بازیابی کنیم FormData هدف – شی. مهم است که توجه داشته باشید که توسعه دهندگان اغلب استفاده می کنند FormData زیرا ورودی فایل را رمزگذاری می کند.
چگونه کار می کند؟
این FormData شی را می توان برای جمع آوری ورودی های فرم به سه روش اصلی و مدیریت آنها به صورت جداگانه استفاده کرد.
پس از یک رویداد، ورودی ها را از یک فرم خاص بگیرید
// const form = document.getElementById("fileUploadForm");
form.addEventListener("submit", (event) => {
const inputs = new FormData(form);
});
در اینجا به فرم و ارسال کننده آن دسترسی پیدا می کنیم و سپس از آن استفاده می کنیم FormData شیء جمع آوری تمام ورودی های کاربر از فرم پس از ارسال.
یک متغیر را از یک فرم از قبل پر کنید
// const form = document.getElementById("fileUploadForm");
// const submitter = document.getElementById("btn");
const inputs = new FormData(form, submitter);
با ارسال هر دو فرم و ارسال کننده آن به FormData سازنده، ما به طور خودکار هر مقدار وارد شده در فرم را بدست می آوریم. توجه به این نکته ضروری است که کد بالا تنها در صورتی معتبر است که ارسال کننده عضو فرم باشد. علاوه بر این، FormData ورودی را فقط با نام و بدون حالت غیرفعال بازیابی می کند.
یک FormData خالی ایجاد کنید
const inputs = new FormData();
قطعه کد بالا یک خالی ایجاد می کند FormData شی، به ما امکان می دهد در صورت نیاز داده ها را اضافه کنیم.
const inputs = new FormData();
inputs.set("name", "Ayobami");
خالی FormData هنگامی که مقادیر ورودی فرم مستقیماً از فرم به دست نیامده اند، برای ساختاربندی مفید است. بازدید کنید FormData Web API برای کسب اطلاعات بیشتر در مورد دیگران FormData مواد و روش ها.
توجه داشته باشید: آ FormData شیء دارای روشهای یکسانی است، خواه از قبل پر شده باشد، چه خالی باشد و چه “post populated”. اکنون که روش گرفتن مقادیر ورودی فرم را یاد گرفتید، وقت آن است که Fetch API را برای ارسال فایل به سرور بررسی کنید.
Fetch API چیست؟
Fetch API یک صفحه وب را قادر می‌سازد تا منابع را از سرور به صورت ناهمزمان ارسال و دریافت کند، بدون اینکه در اجرای تک رشته‌ای وقفه ایجاد شود. موتور جاوا اسکریپت. متد fetch وعده ای را برمی گرداند که در یک شی Response حل می شود. از این شی، داده های واقعی را می توان با فراخوانی روش هایی مانند json() یا text().
در اینجا ساختار نحوی Fetch API آمده است:
fetch(resource, options)
Fetch API دو آرگومان می گیرد. اولین استدلال این است resource، در درجه اول یک URL به منبعی که باید واکشی شود. آرگومان دوم گزینه های سفارشی را ارائه می دهد که می خواهید برای درخواست خود تنظیم کنید. برای آشنایی با روش سفارشی کردن گزینه‌های واکشی با جزئیات، لطفاً به سایت مراجعه کنید واکشی عملکرد جهانی مستندات.
با استفاده از جاوا اسکریپت یک فایل آپلود کنید
آپلود یک فایل با استفاده از جاوا اسکریپت مشابه فرم ارسال استاندارد با جاوا اسکریپت است. ویژگی های تگ ورودی فایل ما مشخص می کند که می خواهیم یک فایل از هر نوع (تصویر، ویدیو یا موارد دیگر) آپلود کنیم.
اینجاست process:
const form = document.getElementById("fileUploadForm");
const data = new FormData(form);
form.addEventListener("submit", async (event) => {
event.preventDefault();
let response = await fetch("https://jsonplaceholder.typicode.com/posts", {
method: "POST",
body: JSON.stringify(data),
headers: {
"Content-type": "application/json; charset=UTF-8",
},
});
let result = await response.json();
console.log(result);
});
در کد بالا، ورودی انتخابی یک فرم را با استفاده از FormData سازنده و ارسال آن به عنوان body از یک درخواست به URL در Fetch API. ما متد درخواست را روی قرار دادیم POST برای انتقال داده ها به عنوان درخواست body و از مشاهده محتوای درخواست توسط اشخاص ثالث جلوگیری کنید، زیرا به طور خودکار توسط آن رمزگذاری می شود HTTPS. به طور خلاصه، POST روش برای ارسال داده های جدید به سرور استفاده می شود. علاوه بر این، سرصفحه‌های درخواست را طوری تنظیم می‌کنیم که نشان دهد محتوا داخل است JSON فرمت و UTF-8 کدگذاری شده است.
این async کلمه کلیدی نشان می دهد که اجرای تابع ممکن است کمی طول بکشد و موتور جاوا اسکریپت باید به کار ادامه دهد process سایر قسمت های کد در همین حال، await به موتور دستور می دهد تا قبل از ادامه دادن سایر قسمت های کد منتظر پاسخ بماند، زیرا کل کد بستگی دارد روی پاسخ.
ممکن است کنجکاو باشید که چگونه روش آپلود فایل در این مقاله با رویکرد سنتی آپلود صرفاً از طریق فرم‌های HTML متفاوت است. تمایز در ارسال داده‌های فرم با ساختار مناسب به‌صورت ناهمزمان است، برخلاف فرم‌های HTML که نیاز به یک page بارگذاری مجدد علاوه بر این، مانند فرم‌های HTML به طور موثر توسط سرور مدیریت می‌شود، زیرا یک شی از داده‌های فرم HTML است که می‌تواند در آن منتقل شود. JSON یا فرمت های دیگر
اشکال اصلی آپلود فایل ها با جاوا اسکریپت به جای فرم HTML این است که اگر جاوا اسکریپت در مرورگر غیرفعال باشد، آپلود کار نخواهد کرد.
FormData در تمام مرورگرهای وب مدرن هنگامی که از پارامتر دوم آن استفاده نمی کنید، پشتیبانی می شود FormData(formElement(, submitter))، یا روش ذکر شده در این مقاله را دنبال کنید. با این حال، برخی از ویژگی های Fetch API در همه مرورگرهای مدرن پشتیبانی نمی شوند، به همین دلیل است که توسعه دهندگان اغلب از آن استفاده می کنند Axios همانطور که ساخته شده است روی Fetch API و راه حلی برای همه مرورگرهای اصلی فراهم می کند.
در اینجا مثال ساده ما در مرورگر شما با تغییرات جزئی به نظر می رسد:
ملاحظات نهایی
آپلود یک فایل با استفاده از جاوا اسکریپت به طور قابل توجهی تعاملات کاربر را افزایش می دهد. همچنین به جمع آوری، پردازش و حفظ داده ها کمک می کند. بسیاری از مشکلات دنیای واقعی برخی از موارد استفاده ذکر شده را برای آپلود یک فایل با جاوا اسکریپت ضروری می کند.
در این مرحله، شما باید بتوانید به یک فرم دسترسی داشته باشید و از آن استفاده کنید FormData سازنده، Fetch API را درک کنید و یک فایل را با جاوا اسکریپت در پروژه های عملی آپلود کنید. در حالی که ممکن است هنوز نیاز به یادگیری اعتبار سنجی فرم و رمزگذاری با استفاده از جاوا اسکریپت داشته باشید، این مقاله پایه محکمی برای آپلود فایل ها با جاوا اسکریپت ارائه می دهد.
(برچسب ها برای ترجمه)# html
منتشر شده در 1403-01-04 11:37:03
