XMLHttpRequest POST multipart/form-data

Question

XMLBttpRequest'i JavaScript'te kullanmak için bir dosya türü giriş öğesi içeren bir formu POST olarak sayfanın yenilenmesini önleyebilir ve yararlı XML geri alabilirsiniz.

Formda, sayfa özeti olmadan, formdaki hedef özniteliği MSIE için bir iframe veya Mozilla için bir nesne olarak ayarlamak için JavaScript'i kullanabilirim ancak bunun iki sorunu vardır. Küçük sorun, hedefin W3C uyumlu olmamasıdır (bu yüzden onu XHTML'de değil, JavaScript’te ayarladım). Asıl sorun, onload olayının, en azından OS X Leopard'daki Mozilla'da hiç çalışmadığıdır. Ayrıca, XMLHttpRequest daha iyi yanıt kodu için yapardı, çünkü döndürülen veriler iframe'de olduğu gibi XHTML ile sınırlı değil, XML olabilir.

Content-Type: multipart/form-data;boundary=<boundary string> 
Content-Length: <length> 
--<boundary string> 
Content-Disposition: form-data, name="<input element name>" 

<input element value> 
--<boundary string> 
Content-Disposition: form-data, name=<input element name>"; filename="<input element value>" 
Content-Type: application/octet-stream 

<element body> 

nasıl yukarıdaki HTTP akışı çoğaltmak için XMLHttpRequest nesnesinin gönderme yöntemini alırım:

benziyor HTTP form sonuçlarını gönderme?

Answer 1

Kendinizi send yöntemi (yani. Xhr kullanmak sonra (http://www.faqs.org/rfcs/rfc2388.html bu konuda daha fazla bilgi) ve 'parçalı/form-data' isteğini gerçekleştirebilmesi için onload olayı eklemek. send (your-çok parçalı form-data)). Benzer şekilde, ancak daha kolay, Firefox 4+'de (ayrıca Chrome 5+ ve Safari 5+'de), bu istekleri oluşturmanıza yardımcı olan FormData arayüzünü kullanabilirsiniz. send yöntemi, metin içeriği için iyidir, ancak görüntüler gibi ikili veriler göndermek istiyorsanız, Firefox 3.0 ile başlayan yaklaşık sendAsBinary yönteminin yardımıyla yapabilirsiniz. XMLHttpRequest aracılığıyla dosya gönderme hakkında ayrıntılar için lütfen http://blog.igstan.ro/2009/01/pure-javascript-file-upload.html'a bakın.

Answer 2

iframe'in (görünmez olan) neden XHTML'yi içerdiğini ve HERHANGİ BİR içeriği içermediğini anlamıyorum. Iframe kullanıyorsanız, onreadystatechange olayını ayarlayabilir ve 'complete' (tam) için bekleyebilirsiniz. Ardından dize sonucunu almak için frame.window.document.innerHTML (lütfen birisi beni düzeltin) kullanabilir.

var lFrame = document.getElementById('myframe'); 
lFrame.onreadystatechange = function() 
{ 
    if (lFrame.readyState == 'complete') 
    { 
     // your frame is done, get the content... 
    } 
}; 

Answer 3

bir javascript ajax dosya yüklemeleri için tek çözüm yoktur bu yüzden javascript içinde bir dosya giriş alanından erişmek için herhangi bir yolu yoktur.

using an iframe gibi bir geçici çözüm vardır.

Diğer seçenek Sen IFrame kimliğini belirtmek nerede basitçe, formunuza bir hedef özelliği ekleyin bu işe almak için IFrame'a POST gerekecektir SWFUpload veya Google Gears

Answer 4

gibi bir şey kullanmak olacaktır. Böyle bir şey: i belirtilen yüklendiğinde etkinliğinde yaklaşık karıştırmayın duyuyorum

 

<form method="post" target="myiframe" action="handler.php"> 
... 
</form> 
<iframe id="myiframe" style="display:none" /> 
 

Answer 5

, bu sayfada veya iframe üzerindedir ?, ilk cevabın doğru gidecekseniz ne olursa bu, XMLHttpRequest tamamen kullanarak yapmak için hiçbir yol olduğunu Eğer, iframe üzerinde bir kez cevap geldikten sonra, bir metodu tetiklemek istiyorsanız, o zaman zaten bir içeriğin olup olmadığını kontrol etmeli ya da DOM komut dosyası kullanıp kullanmadığınızı kontrol et, sonra yöntemi ateşle.

iframe

if(window.attachEvent){ 
document.getElementById(iframe).attachEvent('onload', some_method); 
}else{ 
document.getElementById(iframe).addEventListener('load', some_method, false); 
} 

Answer 6

Content-Disposition: form-data, Böyle, noktalı virgül kullanmalısınız

isim: Content-Disposition: form-data;

İşte

Answer 7

adlandırdığımıza bir FormData (full doc @MDN)

kullanarak tarih bir yol kadar Senaryo

:

var form = document.querySelector('#myForm'); 
form.addEventListener("submit", function(e) { 
    var xhr = new XMLHttpRequest(); 
    xhr.open("POST", this.action); 
    xhr.addEventListener("load", function(e) { 
     // Your callback 
    }); 

    xhr.send(new FormData(this)); 

    e.preventDefault(); 
}); 

<form id="myForm" action="..." method="POST" enctype="multipart/form-data"> 
    <input type="file" name="file0"> 
    <input type="text" name="some-text"> 
    ... 
</form> 

tekrar teşekkürler (bu temel formdan) Alex Polo için onun yanıtı