XMLHttpRequest POST multipart/form-data

我想在JavaScript中使用XMLHttpRequest来发布包含文件类型输入元素的表单，以便我可以避免页面刷新并获取有用的XML。XMLHttpRequest POST multipart/form-data

我可以提交没有页面刷新的表单，使用JavaScript将表单上的目标属性设置为MSIE的iframe或Mozilla的对象，但这有两个问题。小问题是目标不符合W3C标准（这就是为什么我将它设置为JavaScript而不是XHTML）。主要的问题是onload事件不会触发，至少不会在OS X Leopard上的Mozilla上触发。此外，XMLHttpRequest会使更漂亮的响应代码，因为返回的数据可能是XML，而不像iframe那样局限于XHTML。

1.5.2 HTTP，看起来像表单结果：

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>

如何获得XMLHttpRequest对象的发送方法复制上述HTTP流？

来源

2008-09-30 Robin like the bird

9年后你已经接受了答案！你是stackexchange上的第二个。 – peterh 2017-03-24 16:15:04

可以构建“多部分/格式数据”请求自己（在http://www.faqs.org/rfcs/rfc2388.html阅读更多关于它），然后使用send方法（即XHR。发送（您-多形式的数据））。同样，但更容易，在Firefox 4+（也可以在Chrome 5+和Safari 5+中），您可以使用帮助构建此类请求的接口。 send方法适用于文本内容，但如果要发送二进制数据（如图像），则可以使用从Firefox 3.0开始的sendAsBinary方法的帮助。有关如何通过XMLHttpRequest发送文件的详细信息，请参阅http://blog.igstan.ro/2009/01/pure-javascript-file-upload.html。

来源

2010-11-21 23:02:18

圣***。谢谢！试图找出如何手动做一个小时与我的服务器无法解析我发送的 – 2017-12-31 13:41:59

我不明白为什么iframe（不可见的）暗示XHTML而不是任何内容。如果您使用iframe，则可以设置onreadystatechange事件并等待“完成”。接下来，您可以使用frame.window.document.innerHTML（请有人纠正我）来获取字符串结果。

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

来源

2008-09-30 22:42:31 helios

没有任何方法可以访问JavaScript内部的文件输入字段，所以没有任何JavaScript的Ajax文件上传解决方案。

有像using an iframe这样的解决方法。

另一种选择是使用像SWFUpload或Google Gears

来源

2008-09-30 22:42:40 TonyB

您需要发布到iframe来得到这个工作，只是一个目标属性添加到您的形式，在那里你指定的IFrame ID。事情是这样的：

 

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

来源

2008-09-30 22:45:52 mmattax

我很迷惑关于您所指定的onload事件，它是网页上或IFRAME？第一个答案是正确的世界上没有其他的方式，如果有什么要做到这一点使用XMLHttpRequest的纯粹，你想要达到的目标是在iframe上存在响应时触发某种方法，只需使用DOM脚本检查是否已经有内容，然后触发该方法。

到onload事件附加到的IFRAME

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

来源

2008-10-04 18:15:57 Komang

内容处置：表格数据，名称

你应该使用分号，就像这样：内容处置：表格数据;命名

来源

2011-06-29 15:27:23 Aldekein

这里是一个高达使用FORMDATA（full doc @MDN）

日期的方式

脚本：

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>

感谢Alex波罗他回答

来源

2017-12-31 13:58:56

XMLHttpRequest POST multipart/form-data

回答

相关问题