JavaScript FormData arayüzü, anahtar/değer çiftlerine sahip bir nesne oluşturmak için bir yöntem sağlar. Bu nesneler fetch() veya XMLHttpRequest.send() yöntemi kullanılarak internet üzerinden paylaşılabilir. HTML form öğesinin işlevselliğini kullanır. 'Çok parçalı/form-veri' olarak ayarlanmış kodlama türündeki bir form tarafından kullanılacak formatın aynısını kullanacaktır.
GET istek gönderimindeki etiket davranışında olduğu gibi sorgu parametrelerini almak için bunu doğrudan URLSearchParams yapıcısına da iletebiliriz.
Genellikle sunucuya gönderilecek veri kümesini oluşturmak için kullanılır. FormData nesnesi, her öğe için bir dizi içeren bir dizi dizisidir.
Bu diziler aşağıdaki üç değere sahiptir:
isim: Alanın adını içerir.
değer: Alanın String veya Blob nesnesi olabilecek değerini içerir.
dosya adı: Adı tutan bir dize olan dosya adını içerir. Bir blob nesnesi 2 olarak iletildiğinde ad sunucuya kaydedilecektir.veparametre.
Neden FormData?
HTML form öğeleri, alanlarını ve değerlerini otomatik olarak yakalayacak şekilde geliştirilmiştir. Bu tür senaryolarda FormData arayüzü, HTML formlarını dosyalar ve ek alanlar ile veya bunlar olmadan göndermemize yardımcı olur.
Kullanıcı tarafından girilen form verilerini içeren bir nesnedir.
Form veri oluşturucusu aşağıdadır:
let formData = new FormData([form]);
FormData nesneleri fetch gibi ağ yöntemleriyle gövde olarak kabul edilebilir. Varsayılan olarak Content-Type: multipart/form-data ile kodlanır ve gönderilir.
Sunucu bunu normal form gönderimi olarak değerlendirecektir.
FormData'yı göndermenin basit bir örneğini anlayalım.
Temel FormData Gönderme
Aşağıdaki formda sunucuya basit bir FormData gönderiyoruz.
Index.html:
formElem.onsubmit = async (e) => { e.preventDefault(); const data=new FormData(myform) let response = await fetch('url', { method: 'POST', body: data }); let result = await response.json(); Console.log(result); }; Yukarıdaki örnekte, verileri göndermek için herhangi bir arka uç API'si kurmuyoruz çünkü bu, bu eğitimin kapsamı dışındadır. Ancak ağ sekmesine gelen payloadı kontrol edebilir ve FormData arayüzünün nasıl çalıştığını anlayabiliriz.
Dolayısıyla geliştirici aracındaki ağ isteğine bakarsak aşağıdaki yükü gösterecektir:
Yukarıdaki ağ isteğinde form verileri, FormData nesnesi kullanılarak ağ üzerinden gönderilir. Diğer yollarla formdan veri almak için birden fazla yöntem belirtmemiz gerekir.
Böylece FormData arayüzünü kullanarak formData’yı sunucuya kolaylıkla gönderebiliriz. Bu sadece tek satırlık bir koddur.
FormData Constructor
FormData() yapıcısı yeni bir FormData nesnesi oluşturmak için kullanılır. Aşağıdaki şekillerde kullanılabilir:
new FormData() new FormData(form) new FormData(form, submitter)
Parametreler:
form (İsteğe bağlı):
Bu bir HTML öğesidir; belirtilirse FormData nesnesi formun geçerli anahtarları/değerleri ile doldurulur. Anahtarlar için her öğenin ad özelliği özelliklerini ve değerler için gönderilen değerlerini kullanır. Ayrıca dosya giriş içeriğini de kodlar.
gönderen (İsteğe bağlı):
Gönderen düğmesi bir formun bir öğesidir. Gönderen öğenin bir ad öznitelik özelliği varsa, verileri FormData nesnesine dahil edilecektir.
gimp'i jpg olarak dışa aktar
FormData Yöntemleri
FormData, Form alanları verilerine erişmede ve bunları değiştirmede yardımcı olabilecek çeşitli yöntemler sağlar.
Daha az sayıda durumda form verilerini sunucuya göndermeden önce değiştirmemiz gerekebilir. Bu yöntemler bu durumlarda yardımcı olabilir.
Aşağıda bazı yararlı formData yöntemleri verilmiştir:
formData.append(ad, değer)
İki bağımsız değişkenin adını ve değerini alır ve sağlanan ad ve değere sahip bir form alanı nesnesi ekler.
formData.append(ad, blob, dosyaAdı)
Name, blob ve fileName bağımsız değişkenlerini alır. HTML öğesi ise veri nesneleri oluşturmak için bir alan ekler, ardından üçüncü argüman fileName, kullanıcının dosya sistemindeki dosya adına göre dosya adını ayarlar.
formData.delete(name)
Argüman olarak bir isim alır ve aynı ada sahip belirtilen alanı kaldırır.
formData.get(isim)
Ayrıca argüman olarak bir isim alır ve belirtilen alanın değerini verilen isimle alır.
formData.has(isim)
dize tarihini dönüştür
Ayrıca adı argüman olarak alır, verilen adla alanın varlığını kontrol eder ve varsa true değerini döndürür; aksi takdirde yanlış.
Bir formda aynı ada sahip birden fazla alan bulunabilir, bu nedenle aynı adlı alanların tümünü eklemek için birden fazla ekleme yöntemi belirtmemiz gerekir.
Ancak aynı adlı alanlar hatalara neden olacak ve bunların veritabanına yerleştirilmesinde karmaşıklık yaratacaktır. Dolayısıyla formData, Append ile aynı sözdizimine sahip başka bir yöntem sağlar, ancak verilen addaki tüm alanları kaldırır ve ardından yeni bir alan ekler. Böylece ismi olan benzersiz bir anahtarın olmasını sağlar.
formData.set(name, value) formData.set(name, blob, fileName)
Set yönteminde sözdizimi, ekleme yöntemi gibi çalışır.
FormData Nasıl Yinelenir?
FormData, tüm anahtarlarını yinelemek için FormData.entries() yöntemini sağlar. Bu yöntem, FormData'daki tüm anahtar/değer girişlerini yineleyen bir yineleyici döndürür. Anahtar bir dize nesnesidir, değer ise bir blob veya dize olabilir.
Aşağıdaki örneği düşünün:
formData.append('key1', 'value1'); formData.append('key2', 'value2'); // Display the key/value pairs for (const pair of formData.entries()) { console.log(`${pair[0]}, ${pair[1]}`); } Yukarıdaki örneğin çıktısı şöyle olacaktır:
key1, value1 key2, value2
Veri dosyası içeren bir form gönderme
Dosyalar FormData kullanılarak da gönderilebilir. Dosyalar form öğesi üzerinde çalışır ve İçerik Türü: multipart/form-data olarak gönderilir. Çok parçalı/form-veri kodlaması, dosyaların gönderilmesine olanak tanır. Yani varsayılan olarak form verilerinin bir parçasıdır. Form-data kodlaması ile dosyaları sunucuya gönderebiliriz.
Aşağıdaki örneği düşünün:
File: myform.onsubmit = async (e) => { e.preventDefault(); const data=new FormData(myform) console.log(data) let response = await fetch('url', { method: 'POST', body: data }); let result = await response.json(); }; Yukarıdaki örnekte görüntü nesnesi FormData kullanılarak ikili biçimde gönderilir. Buna geliştirici aracının ağ sekmesinde bakabiliriz:
Form verilerini Blob nesnesi olarak gönderme
Form verilerini bir blob nesnesi olarak göndermek, dinamik olarak oluşturulan ikili verileri göndermenin kolay bir yoludur. Herhangi bir görüntü veya damla olabilir; fetch gövdesinde ileterek doğrudan sunucuya gönderebiliriz.
Görüntü verilerinin ve ad, şifre vb. gibi diğer form verilerinin gönderilmesi uygundur. Ayrıca, sunucuların ikili veriler yerine çok parçalı kodlanmış formları kabul etmesi daha uygundur.
Görüntüyü diğer form verileriyle birlikte form olarak gönderen aşağıdaki örneği düşünün.
mycanvas.onmousemove = function(e) { let ctx = mycanvas.getContext('2d'); ctx.lineTo(e.clientX, e.clientY); ctx.stroke(); }; async function submit() { let imageBlob = await new Promise(resolve => mycanvas.toBlob(resolve, 'image/png')); let formData = new FormData(); formData.append('firstName', 'Alex'); formData.append('image', imageBlob, 'image.webp'); let response = await fetch('url', { method: 'POST', body: formData }); let result = await response.json(); alert(result.message); } Yukarıdaki örnekte, görüntü blobunun aşağıdaki şekilde eklendiğini görebiliriz:
formData.append('image', imageBlob, 'image.webp');
Bu, bir ile aynıdır ve kullanıcı, dosya sisteminden bazı imageBlob verilerini içeren 'image.webp' adında bir dosya gönderdi. Sunucu bunu normal form verileri olarak okuyacaktır.