Javascript'te yeni FormData() Nesnesi
Bu new FormData(), yeni bir FormData nesnesi oluşturan bir JavaScript oluşturucu işlevidir. FormData nesnesi, öncelikle HTML formlarından gelen verileri işlemek için kullanılır ve AJAX veya getirme istekleri aracılığıyla verileri kolayca oluşturmanıza ve sunucuya göndermenize olanak tanır.
Yeni bir FormData nesnesi oluşturduğunuzda new FormData(), isteğe bağlı olarak bir HTML form öğesine bir başvuruyu argüman olarak geçirebilirsiniz. Bir form öğesi sağlanırsa, oluşturucu otomatik olarak metin girdileri, onay kutuları, radyo düğmeleri ve dosya girdileri gibi formun tüm giriş alanlarını toplar ve bunları FormData nesnesine ekler.
İşte form öğesi olmadan yeni bir FormData nesnesi oluşturmaya dair bir örnek:
Ve işte form öğesiyle yeni bir FormData nesnesi oluşturmaya dair bir örnek:
var formData = new FormData(formElement);
Bir FormData nesneniz olduğunda, . gibi yöntemleri kullanarak ek veriler ekleyerek onu düzenleyebilirsiniz append(). Bu, FormData nesnesine anahtar-değer çiftleri eklemenize olanak tanır; burada anahtar, alan adını ve değer, alan değerini temsil eder.
fetch()FormData nesneleri genellikle verileri sunucuya eşzamansız olarak göndermek için XMLHttpRequest işleviyle birlikte kullanılır . HTTP isteğinin bir parçası olarak dosyalar da dahil olmak üzere form verilerini paketlemek ve iletmek için kolay bir yol sağlarlar.
1.Tek bir anahtar-değer çifti ekleme:
formData.append('username', 'johnsmith');
Bu örnekte, “username” anahtarı ve “johnsmith” değeri FormData nesnesine eklenir.
2. Birden fazla anahtar-değer çifti ekleme:
formData.append('username', 'johnsmith');
formData.append('email', 'john@example.com');
formData.append('age', 25);
3. Bir dosya ekleme:
var fileInput = document.getElementById('fileInput');
var file = fileInput.files[0];
formData.append('file', file);
Bu örnekte, bir dosya giriş öğesi seçilir ve seçilen dosya FormData nesnesine eklenir. Bu, dosyaları form verilerinizin bir parçası olarak yüklemenize olanak tanır.
4. Aynı anahtar için bir değer dizisi ekleme:
var colors = ['red', 'blue', 'green'];
for (var i = 0; i < colors.length; i++) {
formData.append('color', colors[i]);
}
Burada, bir renk dizisi üzerinde yineleme yapılır ve her renk FormData nesnesine aynı anahtar "color" ile eklenir. Bu, aynı alan adı için birden fazla değer göndermek istediğinizde yararlı olabilir.
Bu örnekler, FormData'daki yöntemin bazı yaygın kullanımlarını göstermektedir append(). Form verileriyle çalışırken bunları kendi özel ihtiyaçlarınıza ve gereksinimlerinize uyacak şekilde uyarlayabilirsiniz.
Kaynak
