一个老外写的基于ajax的文本上传代码

Go_Rush 2006-06-07 10:32:31

当然，仅仅是文本文件，而且是事先知道内容。

对于以下问题，千万不要想歪了啊.
1。能否上传客户端任意文件比如 c:\windows\help.htm
2。能否上传二进制文件比如: regedit.exe

原文来自google论坛 javascript版
http://groups.google.com/group/comp.lang.javascript/browse_thread/thread/cc7cf728bec973bd/312d118bcd6c780a?q=ajax+prototype&rnum=1#312d118bcd6c780a

NextOne wrote:
> Is it possible to send an AJAX XMLHttpRequest using prototype.js API
> for a multipart/form-data ?

> I already done parsing form parameters and sending GET/POST request,
> but does this work with <input type="file"> ?
> Who handle file submit and encoding ?

The XMLHttpRequest object has a method setRequestHeader so you would
need to set
httpRequestInstance.setRequestHeader(
'Content-Type: multipart/form-data')
at least after the open call, then you need to make sure your request
body, that is the string that you pass to the send method, is indeed in
the format multipart/form-data defines
<http://www.w3.org/TR/html4/interact/forms.html#h-17.13.4.2>.
If I understand that right then in reality you need to define a boundary
string used in the body to separate the multiple parts and you need to
pass the boundary string in the header so you would end up doing e.g.

var httpRequest = null;
if (typeof XMLHttpRequest != 'undefined') {
httpRequest = new XMLHttpRequest();

}

else if (typeof ActiveXObject != 'undefined') {
// need try/catch here in reality
httpRequest = new ActiveXObject('Microsoft.XMLHTTP');

}

if (httpRequest != null) {
var boundaryString = 'AaB03x';
var boundary = '--' + boundaryString;
var requestBody = [
boundary,
'Content-Disposition: form-data; name="GOD"',
'',
'Kibo',
boundary,
'Content-Disposition: file; name="prayer"; filename="prayer.txt"',
'Content-Type: text/plain',
'',
'Kibology for all.\r\nAll for Kibology.',
boundary
].join('\r\n');
httpRequest.open('POST', 'test2005093002.php', true);
if (typeof httpRequest.setRequestHeader != 'undefined') {
httpRequest.setRequestHeader('Content-Type',
'multipart/form-data; boundary=' + boundaryString);
httpRequest.onreadystatechange = function (evt) {
if (httpRequest.readyState == 4) {
alert(httpRequest.status + ' ' + httpRequest.statusText + '\r\n' +
httpRequest.getAllResponseHeaders() + '\r\n\r\n' +
httpRequest.responseText);
}
};
httpRequest.send(requestBody);
}

}

That simple example works for me here with IE 6, Mozilla 1.7, Opera 8.50
so that the PHP script receives the form data fine (one element in
$_POST and one in $_FILES).
Of course you have no way to read files from the local file system. And
encoding or binary data is not solved with that simple approach.

As for that prototype.js API, ask the author or look into its
documentation if one is provided.

--

Martin Honnen
http://JavaScript.FAQTs.com/

...全文

589 6 打赏收藏举报

写回复

用AI写文章

6 条回复

切换为时间正序

请发表友善的回复…

发表回复

wtogether 2006-06-08

打赏
举报

xmlrpc.js
if (!window.XMLHttpRequest)
{
window.XMLHttpRequest = function()
{
if (window.ActiveXObject)
{
var list = new Array
(
"MSXML2.XMLHTTP.5.0",
"MSXML2.XMLHTTP.4.0",
"MSXML2.XMLHTTP.3.0",
"MSXML2.XMLHTTP.2.6",
"Microsoft.XMLHTTP"
);
for (var i = 0; i < list.length; i++)
{
try
{
return(new ActiveXObject(list[i]));
}
catch(ex)
{
}
}
}
return(null);
};
};

if (!window.XMLDOMDocument)
{
window.XMLDOMDocument = function()
{
if (window.ActiveXObject)
{
var list = new Array
(
"MSXML2.DOMDocument.4.0",
"MSXML2.DOMDocument.3.0",
"MSXML2.DOMDocument.2.6",
"Microsoft.XMLDOM"
);
for (var i = 0; i < list.length; i++)
{
try
{
return(new ActiveXObject(list[i]));
}
catch(ex)
{
}
}
}
else if (document.implementation && document.implementation.createDocument)
{
return(document.implementation.createDocument("", "", null));
}
return(null);
}
}

if (/gecko/i.test(window.navigator.userAgent))
{
Document.prototype.loadXML = function()
{
var xmldoc = (new DOMParser()).parseFromString(arguments[0], "text/xml");
while (this.hasChildNodes())
{
this.removeChild(this.lastChild);
}
for (var i = 0; i < xmldoc.childNodes.length; i++)
{
this.appendChild(this.importNode(xmldoc.childNodes[i], true));
}
return(true);
};
Document.prototype.selectSingleNode = function(tagname)
{
var node = this.evaluate(tagname, this, null, 0, null);
return(node.iterateNext());
};
Document.prototype.__defineGetter__("xml", function()
{
return((new XMLSerializer()).serializeToString(this));
});
Element.prototype.__defineGetter__("xml", function()
{
return (new XMLSerializer()).serializeToString(this);
});
Element.prototype.__defineGetter__("text", function()
{
return(this.textContent);
});
Element.prototype.__defineSetter__("text", function()
{
var argv = arguments;
this.textContent = argv[0];
});
}

wtogether 2006-06-08

打赏
举报

借个地方发个WAP的web模拟器，楼主别见怪
非常简单的XMLHttpRequest和XMLDOMDocument应用，只能访问WAP页面，今天写这个模拟器的时候发现好多WAP站点的格式不规范，例如有的站点在xml前言上方还留有空行，这个是不被微软的XMLDOMDocument支持的，还有的页面包含字符，这个是不被Firefox支持的

一共三个文件：xmlrpc.html xmlrpc.js xmlrpc.asp，放在同一个目录下，然后访问xmlrpc.html文件

xmlrpc.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="content-type" content="text/html; charset=gb2312" />
<title>XMLRPC Demo</title>
<style type="text/css">

</style>
<script language="javascript" src="xmlrpc.js"></script>
<script language="javascript">

</script>
</head>

<body>
<table width="180" border="1" cellpadding="2" cellspacing="0" bordercolor="#000000" style="border-collapse:collapse">
<tr>
<td bgcolor="#779DBF" style="color:#FFFFFF; padding-left:5px"><b>WAP模拟器</b></td>
</tr>
<tr>
<td>
<input type="text" id="strText" name="strText" style="border:1px solid #000000; height:14px; width:140px" />
<input type="button" id="btnCall" name="btnCall" value="GO" onclick="WAPRequest()" style="border:1px solid #000000; width:30px; padding:0px" />
</td>
</tr>
<tr>
<td><div id="WAP" style="border:1px solid #000000; padding:2px; width:180px; height:200px; overflow-y:auto; overflow-x:hidden"></div></td>
</tr>
</table>
</body>

</html>

jiangtao088 2006-06-08