昨天和今天一直在做一个无刷新多文件上传功能,现在总算是做好。也算是有点坑爹吧,开始一直想用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" οnclick="add();" value="添加一个文件" id="AddFile" />
<div style="margin-top: 5px">
文件列表:
<br />
<div id="uploadFileDiv" style="border:1px solid gray; width:600px">
文件1:<input type="file" style="width: 500px" id="files0" name="files" />
</div>
<input type="button" id="uploadButton" οnclick="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="width: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服务端的操作草草了事....
能力不足,有错之处,万望指出,如有更好的实现方法,感谢共享...