Bir FormData dosyasının boş olup olmadığını nasıl kontrol ederim?

Question

Arka plan rengi belirtme veya arka plan resmi yükleme seçeneği içeren bir AJAX formu oluşturuyorum. bgImg alanı için bir dosya belirtildiyse, bgColor alanındaki alanın yok sayılması hedeflenir. sorundur

var fd = new FormData(document.getElementById('myForm')); 

, ben FormData nesnesini nasıl kontrol edileceğini bilmiyorum

:

<label>Color: <input type="color" name="bgColor" value="#000000"></label><br> 
<label>Image: <input type="file" name="bgImg" accept="image/png"></label><br> 

Ben FormData API kullanarak, form verilerini elbette, toplamak için en kolay yol buldum bir dosyanın seçilip seçilmediğini. Dosya girişi boş olsun ya da olmasın, alan mevcut olduğundan fd.has('bgImg'), doğru döner - tamam, bu mantıklı.

Ama fd.get('bgImg') rağmen bir dosya belirtilmişse çalışıyor ve o zaman pozitif vaka doğrulayabilir, dosya giriş boşken aynı çizgi dik benim tarayıcı çöküyor! (Sadece Firefox'ta kontrol ettim, fakat bu, gerçek senaryomda veya tarayıcı konsolunda olsun, tutarlı bir şekilde gerçekleşir.) Ne yazık ki tanınabilir ama kararsız olan bir işlemin etkin bir şekilde işe yaramayacağı bir "bir dosya olup olmadığını kontrol edin." Peki, bgImg alanının boş olup olmadığını nasıl anlayacağım?

Ben de sadece formun elements['bgImg'].files nesneyi kontrol edebilirsiniz farkındayım, ama FormData API zaten orada olduğunu ve kıvrımlara, ve görünüşe göre ölümcül borked açılması sağlanmaması halinde daha kolay olurdu! Yani bir şey mi eksik? Eğer bir şekilde uygun FormData nesnesini kullanmanın bir yolu yanlışsa, o zaman ne yapmam gerekiyordu? Tek çözüm olarak files koleksiyonunu kontrol ediyor mu?

DÜZENLEME: Daha fazla araştırma, bu API'nın Firefox dışındaki tarayıcılarda oldukça zayıf bir desteğe sahip olduğunu ortaya çıkarmıştır, bu nedenle element.files'un gerçekten daha iyi bir çözüm olup olmadığını kontrol etmek mümkündür. Yine de bunun Firefox’ta tarayıcıyı neden çökeceği konusunda şaşkınım. Bu cephedeki bir cevap kısa süre içinde değilse, muhtemelen kendi cevabımı gönderirim.

Answer 1

Firefox'taki FormData API'sinin bu davranışı maalesef bir hata olabilir gibi görünüyor. Ancak, tarayıcılar arasında FormData yöntemleri için rather minimal support, verilen iyi bir çözüm zaten form öğeleri kontrol etmek muhtemelen:

var formFields = document.getElementById('mandelForm').elements; 
console.log(formFields['bgImg'].files.length > 0); // True if file selected 

Answer 2

fd = new FormData(); 
for (var i = 0 ; i < files.length ; i ++){ 
     if(files[i].size > 0) 
     { 
      fd.append('file', files[i]); 
     } 
}