使用Ajax中上传文件关键技术
如果想同时既使用 FORM 提交，还不想刷新页面，记住一句话：可以给 FORM 加上 target 属性，将返回结果页面定向到一个隐藏的 IFrame！！！！
案例：
<!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=utf-8" />
<title>仿126网络硬盘上传 by littlelam</title>
<script type="text/javascript" src="controls/jquery.js"></script>
</head>
<script type="text/javascript">
var TotalFiles = 0;
function AddFiles()
{
//debugger;
TotalFiles ++;
var file=document.createElement("input");
file.type = "file";
file.id = "f"+ TotalFiles.toString();
file.name = "files"+ TotalFiles.toString();
file.hideFocus = true;
file.size = 1;
file.style.cssText = "cursor:pointer; width:1px; border:none; height:32px; padding:0px; margin:0px;position:absolute; opacity:0;filter:alpha(opacity=0);left:-32px !important;left:-5px;left/**/:-3px; font-size:20px;";
file.onchange = function ()
{
$Get("s"+TotalFiles.toString()).innerHTML = $Get("f"+TotalFiles.toString()).value.substring($Get("f"+TotalFiles.toString()).value.lastIndexOf("\\")+1,$Get("f"+TotalFiles.toString()).value.length) + " <span onclick=\"DelFile('"+TotalFiles.toString()+"')\" style=\"cursor:pointer;color:red\">X</span>";
this.style.display = "none";
AddFiles();
};
$Get("UpFilePanelHidden").appendChild(file);
var div=document.createElement("div");
div.id = "s"+ TotalFiles.toString();
$Get("UpFilePanelShow").appendChild(div);
}
function $Get(str)
{
return document.getElementById(str);
}
function DelFile(str)
{
$Get("UpFilePanelHidden").removeChild($Get("f"+str));
$Get("UpFilePanelShow").removeChild($Get("s"+str));
}
function DelEmpty()
{
for (var i=1;i<=TotalFiles;i++)
{
if ($Get("f"+i.toString()))
{
if ($Get("f"+i.toString()).value == "")
$Get("UpFilePanelHidden").removeChild($Get("f"+i.toString()));
}
}
}
function f()
{
AddFiles();
}
</script>
<body>
<form method="post" name="form1" action="uploada.aspx?Modal=C&uploadId=112121212"
enctype="multipart/form-data" target="hidden_frame" onsubmit="DelEmpty();return true;">
<div style="width: 100px; height: 30px; background-image: url(http://mimg.163.com/netfolder/images/all_toolbar.gif);
background-position: 2px -64px; margin: 6px 4px; border: 1px solid #bebebe; cursor: pointer;">
<a id="UpFilePanelHidden" href="javascript:void(0);"></a>
</div>
<div id="UpFilePanelShow">
</div>
<script type="text/javascript">AddFiles();</script>
<input type="text" value="aaa" name="add" />
<input type="text" value="bbb" name="sss" />
<br />
<input type="submit" name="Submit" value="提交" />
<iframe name='hidden_frame' id="hidden_frame" style='display: block' style="width: 300px;
height: 40px;"></iframe>
</form>
<input type="button" value="ajax" onclick="f()" />
</body>
</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=utf-8" /> <title>仿126网络硬盘上传 by littlelam</title> <script type="text/javascript" src="controls/jquery.js"></script></head><script type="text/javascript">
var TotalFiles = 0;function AddFiles(){
//debugger; TotalFiles ++; var file=document.createElement("input"); file.type = "file"; file.id = "f"+ TotalFiles.toString(); file.name = "files"+ TotalFiles.toString(); file.hideFocus = true; file.size = 1; file.style.cssText = "cursor:pointer; width:1px; border:none; height:32px; padding:0px; margin:0px;position:absolute; opacity:0;filter:alpha(opacity=0);left:-32px !important;left:-5px;left/**/:-3px; font-size:20px;"; file.onchange = function () { $Get("s"+TotalFiles.toString()).innerHTML = $Get("f"+TotalFiles.toString()).value.substring($Get("f"+TotalFiles.toString()).value.lastIndexOf("\\")+1,$Get("f"+TotalFiles.toString()).value.length) + " <span onclick=\"DelFile('"+TotalFiles.toString()+"')\" style=\"cursor:pointer;color:red\">X</span>"; this.style.display = "none"; AddFiles(); }; $Get("UpFilePanelHidden").appendChild(file); var div=document.createElement("div"); div.id = "s"+ TotalFiles.toString(); $Get("UpFilePanelShow").appendChild(div);}function $Get(str){ return document.getElementById(str);}function DelFile(str){ $Get("UpFilePanelHidden").removeChild($Get("f"+str)); $Get("UpFilePanelShow").removeChild($Get("s"+str)); }function DelEmpty(){ for (var i=1;i<=TotalFiles;i++) { if ($Get("f"+i.toString())) { if ($Get("f"+i.toString()).value == "") $Get("UpFilePanelHidden").removeChild($Get("f"+i.toString())); } }}function f(){ AddFiles();}</script><body> <form method="post" name="form1" action="uploada.aspx?Modal=C&uploadId=112121212" enctype="multipart/form-data" target="hidden_frame" onsubmit="DelEmpty();return true;"> <div style="width: 100px; height: 30px; background-image: url(http://mimg.163.com/netfolder/images/all_toolbar.gif); background-position: 2px -64px; margin: 6px 4px; border: 1px solid #bebebe; cursor: pointer;"> <a id="UpFilePanelHidden" href="javascript:void(0);"></a> </div> <div id="UpFilePanelShow"> </div> <script type="text/javascript">AddFiles();</script> <input type="text" value="aaa" name="add" /> <input type="text" value="bbb" name="sss" /> <br /> <input type="submit" name="Submit" value="提交" /> <iframe name='hidden_frame' id="hidden_frame" style='display: block' style="width: 300px; height: 40px;"></iframe> </form> <input type="button" value="ajax" onclick="f()" /></body></html>