این Ùصل در مورد ارسال Ùرم‌های HTML است، با یا بدون Ùایل، با Ùیلدهای اضاÙÛŒ Ùˆ غیره.
شیء FormData میتواند به شما در این زمینه Ú©Ù…Ú© کنند. همانطور Ú©Ù‡ ممکن است Øدس زده باشید، این شیء برای نمایش دادن داده‌های Ùرم HTML استÙاده میشود.
constructor به صورت زیر است:
let formData = new FormData([form]);اگر عنصر Ùرم HTML وجود داشته باشد به طور خودکار Ùیلدهای آن را گرÙته Ùˆ ذخیره می‌کند.
ویژگی مهم اینکه از FormData متدهای شبکه مانند fetch می‌توانند یک شیء FormData را در بدنه (body) درخواست قبول کنند. این داده‌ها با هدر Content-Type: multipart/form-data رمزگذاری شده و ارسال میشوند.
.از نظر سرور، این مانند ارسال Ùرم معمولی به نظر میرسد
ارسال یک Ùرم ساده
بیایید ابتدا یک Ùرم ساده را بÙرستیم.
همانطور که مشاهده می‌کنید، این تقریباً یک خط کد است:
<form id="formElem">
<input type="text" name="name" value="John">
<input type="text" name="surname" value="Smith">
<input type="submit">
</form>
<script>
formElem.onsubmit = async (e) => {
e.preventDefault();
let response = await fetch('/article/formdata/post/user', {
method: 'POST',
body: new FormData(formElem)
});
let result = await response.json();
alert(result.message);
};
</script>در این مثال، کد سرور نمایش داده نشده است، چرا Ú©Ù‡ خارج از بØØ« ما است. سرور درخواست POST را قبول کرده Ùˆ با پاسخ “کاربر ذخیره شد†پاسخ میدهد.
متدهای FormData
ما می‌توانیم با استÙاده از متدهای FormData Ùیلدها را تغییر دهیم:
formData.append(name, value)– اضاÙÙ‡ کردن یک Ùیلد به Ùرم باnameÙˆvalueداده شدهformData.append(name, blob, fileName)– اضاÙÙ‡ کردن یک Ùیلد به عنوان<input type="file">آرگومان سومfileNameنام Ùایل را تنظیم میکند (نه نام Ùیلد Ùرم)ØŒ به عنوان نام Ùایل در سیستم کاربرformData.delete(name)– ØØ°Ù Ùیلد باnameداده شدهformData.get(name)– دریاÙت مقدار Ùیلد باnameداده شدهformData.has(name)– اگر یک Ùیلد باnameداده شده وجود داشته باشدtrueÙˆ در غیر اینصورتfalseرا برمی‌گرداند.
یک Ùرم به طور ÙÙ†ÛŒ اجازه دارد Ú©Ù‡ Ùیلدهای زیادی با همان name داشته باشد بنابراین Ùراخوانی‌های چندگانه به append منجر به اÙزودن Ùیلدهایی با همان نام میشود.
همچنین یک متد set وجود دارد با همان سینتکسی Ú©Ù‡ append دارد. تÙاوت این است Ú©Ù‡ set. تمامی Ùیلدهایی Ú©Ù‡ nameداده شده را دارا میباشند را Øذ٠کرده Ùˆ سپس یک Ùیلد جدید با همان نام اضاÙÙ‡ می‌کند. بنابراین، این گونه مطمئن می‌شود Ú©Ù‡ تنها یک Ùیلد با این name وجود دارد بقیه همانند append هستند:
formData.set(name, value),formData.set(name, blob, fileName).
همچنین می‌توانیم با استÙاده از Øلقه for..of روی Ùیلدهای formData Øلقه بزنیم:
let formData = new FormData();
formData.append('key1', 'value1');
formData.append('key2', 'value2');
// List key/value pairs
for(let [name, value] of formData) {
alert(`${name} = ${value}`); // key1 = value1, then key2 = value2
}ارسال Ùرم به همراه یک Ùایل:
Ùرم همواره به عنوان Content-Type: multipart/form-data ارسال میشود. این رمزگذاری امکان ارسال Ùایل‌ها را Ùراهم میکند. بنابراین، Ùیلدهای <input type="file"> نیز مشابه یک Ùرم ارسال میشوند.
مثال با چنین Ùرمی به صورت زیر است:
<form id="formElem">
<input type="text" name="firstName" value="John">
Picture: <input type="file" name="picture" accept="image/*">
<input type="submit">
</form>
<script>
formElem.onsubmit = async (e) => {
e.preventDefault();
let response = await fetch('/article/formdata/post/user-avatar', {
method: 'POST',
body: new FormData(formElem)
});
let result = await response.json();
alert(result.message);
};
</script>ارسال یک Ùرم با داده Blob
همانطور Ú©Ù‡ در Ùصل Fetch دیدیم، ارسال داده‌های دودویی به صورت پویا مانند یک تصویر به عنوان Blob آسان است. میتوانیم آن را به عنوان پارامتر body مستقیماً با fetch ارسال کنیم.
در عمل اغلب مناسبتر است Ú©Ù‡ تصویر را به صورت جداگانه Ù†Ùرستیم بلکه به عنوان یک قسمت از Ùرم با Ùیلدهای اضاÙÛŒ مانند “نام†و دیگر Ùراداده‌ها بÙرستیم.
همچنین، سرورها معمولاً برای پذیرش Ùرم‌های رمزگذاری چند قسمتی (multipart-encoded) مناسب‌تر از داده دودویی خام هستند.
یک مثال از ارسال تصویر<canvas> به همراه باقی Ùیلد ها در قالب یک Ùرم با استÙاده از FormData:
<body style="margin:0">
<canvas id="canvasElem" width="100" height="80" style="border:1px solid"></canvas>
<input type="button" value="Submit" onclick="submit()">
<script>
canvasElem.onmousemove = function(e) {
let ctx = canvasElem.getContext('2d');
ctx.lineTo(e.clientX, e.clientY);
ctx.stroke();
};
async function submit() {
let imageBlob = await new Promise(resolve => canvasElem.toBlob(resolve, 'image/png'));
let formData = new FormData();
formData.append("firstName", "John");
formData.append("image", imageBlob, "image.png");
let response = await fetch('/article/formdata/post/image-form', {
method: 'POST',
body: formData
});
let result = await response.json();
alert(result.message);
}
</script>
</body>به Ù†Øوه اضاÙÙ‡ شدن Blob توجه کنید:
formData.append("image", imageBlob, "image.png");این همانند این است Ú©Ù‡ در Ùرم <input type="file" name="image"> وجود داشته باشد Ùˆ بازدیدکننده یک Ùایل به نام "image.png" (آرگومان سوم) را با داده imageBlob (آرگومان دوم) از سیستم خود ارسال کند.
سرور داده‌های Ùرم Ùˆ Ùایل را می‌خواند انگار Ú©Ù‡ یک ارسال Ùرم معمولی انجام شده است.
خلاصه
Ø´ÛŒ های FormData برای گرÙتن Ùرم HTML Ùˆ ارسال آن با استÙاده از fetch یا یک متد های دیگر شبکه استÙاده می‌شوند.
ما می‌توانیم یا یک new FormData(form) جدید از یک Ùرم HTML ایجاد کنیم، یا یک شیء بدون Ùرم ایجاد کنیم Ùˆ سپس با استÙاده از متدها Ùیلدها را اضاÙÙ‡ کنیم:
formData.append(name, value)formData.append(name, blob, fileName)formData.set(name, value)formData.set(name, blob, fileName)
به دو نکته ویژه در اینجا توجه کنید:
- متد
setÙیلدهای با همان نام را Øذ٠می‌کند، اماappendاینکار را نمیکند. این تنها تÙاوت بین آنهاست. - برای ارسال یک Ùایل، نیاز به سینتکس با 3 آرگومان است، آخرین آرگومان نام Ùایل است Ú©Ù‡ به طور معمول از Ùایل سیستم کاربر برای
<input type="file">گرÙته میشود.
متدهای دیگر:
formData.delete(name)formData.get(name)formData.has(name)
کل داستان همین بود!
نظرات
<code>استÙاده کنید، برای چندین خط – کد را درون تگ<pre>قرار دهید، برای بیش از ده خط کد – از یک جعبهٔ شنی استÙاده کنید. (plnkrØŒ jsbinØŒ codepen…)