昨天和今天一直在做一个无刷新多文件上传功能，现在总算是做好。也算是有点坑爹吧，开始一直想用AJAX的思路去实现，后面不行又打算借用ASP.NET回调的原理最后还是不行，没想到费了很多时间最后还是徒劳！至于为什么不行网上原因也说了很多，自己了解不深所以浪费了一天的时间去，不过，至少时间也没白费，代码这东西都是"折磨"出来....本来是想到了借助一个隐藏IFRAME实现，不过界面虽然没有刷新，不过每次都界面都闪一下，自己看起来有点不想，所以就一直琢磨没想到还是没戏，不过用SWFUpload也可以实现无刷新上传，至于SWFUpload之后在琢磨吧，先把这个给结了...
下面是主要代码：
HTML部分就是一个隐藏IFRAME,FORM以及INPUT了，以及一堆JS了。。
这是BODY部分：
<body> <form id="form1" runat="server"> <div> <input type="text" id="txt" /> <input type="button" onclick="add();" value="添加一个文件" id="AddFile" /> <div style="margin-top: 5px"> 文件列表： <br /> <div id="uploadFileDiv" style="border:1px solid gray; 600px"> 文件1:<input type="file" style=" 500px" id="files0" name="files" /> </div> <input type="button" id="uploadButton" onclick="uploadFile();" value="上传" /> <span id="uploadMessage" style="color: Red;"></span> </div> <div id="processDiv" style="display:none; color: #660066;"> <img alt="" src="014.gif" id="loading" />文件上传中... </div> </div> </form> <div style="display:none"> <iframe name="uploadResponse"></iframe> <!--带当前时间防止因为缓存不填交数据--> <form id="uploadForm" action="UploadFile.ashx?temp=<%= DateTime.Now.Ticks %>" target="uploadResponse" method="post" enctype="multipart/form-data"> </form> </div> </body>
关键的JS/JQuery代码：
<script src="script/jquery-1.4.1.js" type="text/javascript"></script>
<script src="script/jquery-1.4.1-vsdoc.js" type="text/javascript"></script>
<script type="text/javascript">
function uploadFile() {
var id = null;
$("#processDiv").css("display", "block");
$("#uploadFileDiv input[type='file']").each(function () {
$("#uploadForm").append($(this));
uploadFile();
});
$("#uploadForm").submit();
}
function uploadFileResponse(response) {
$("#processDiv").css("display", "none");//主要用于显示上传进度...
window.eval("var rs=" + response);
$("#uploadMessage").html(rs.message);
//还原界面
$("#uploadFileDiv").html("");
$("#uploadForm input[type='file']").each(function (i) {
//
$("#uploadFileDiv").append("文件"+(i+1)+"：");
$("#uploadFileDiv").append($(this));
$("#uploadFileDiv").append("<br/>");
});
}
var index = 1;
function add() {
var htmltext = '<br/>文件'+(index+1)+':<input type="file" style="500px" id="imageFile' + index + '" name="imageFile" />';
$("#uploadFileDiv").append(htmltext);
index++;
}
</script>
最后就是隐藏IFRAME提交表单的最终位置代码了（这种方法不管是APS.NET，JSP或者是PHP都可以用，因为最后提交的位置用什么语言就只是接收并保存文件的代码了）...
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.IO;
/// <summary>
/// UploadImage1 的摘要说明
/// </summary>
public class UploadIFile : IHttpHandler
{
HttpContext context = null;
public void ProcessRequest(HttpContext context)
{
this.context = context;
//这句话主要是不想让客户端缓存服务器的网页文件。
context.Response.Cache.SetCacheability(HttpCacheability.NoCache);
int status = 0;//状态
string message = "";//输出信息
string errorFile="";
if (context.Request.Files.Count == 0)
{
status = 1;
message = "请先选择要上传的文件..";
RenderUploadScript(status, message);
}
for (int i = 0; i < context.Request.Files.Count; i++)
{
string ext = Path.GetExtension(context.Request.Files[i].FileName).ToLower();
if (ext == ".exe")
{
status = 2;
message = "不能上传可执行文件到服务器...";
RenderUploadScript(status, message);
}
Guid fileID = Guid.NewGuid();
string fileName = context.Server.MapPath(String.Format("~\\Files\\{0}" + ext, fileID));
if (context.Request.Files[i].ContentLength == 0)
{
status = 3;
errorFile+=(i+1)+",";
//RenderUploadScript(status, message);
}
context.Request.Files[i].SaveAs(fileName);
}
message = "文件上传成功..";
if(status==3)
message="您上传的文件"+errorFile+"为0字节的文件,该类文件无上传！";
RenderUploadScript(status, message);
}
//动态向客户端输出脚本，其实也就是显示处理结果
private void RenderUploadScript(int status, string mess)
{
string script=string.Format("<script language='javascript'> window.parent.uploadFileResponse(\"{{ status:{0},message:'{1}'}}\"); </script>", status, mess);
context.Response.Write(script);
context.Response.End();
}
public bool IsReusable
{
get
{
return false;
}
}
}
ASP.NET服务端的操作草草了事....
能力不足，有错之处，万望指出，如有更好的实现方法，感谢共享...
本文从百度空间搬家到博客园。。