C#中用js实现文件无刷新上传
最近在写C# .net代码的时候，遇到一个上传刷新的问题。
在新增数据项的时候，用ajax实现无刷新提交，但上传文件的时候，由于数据类型原因，不能将页面的<asp:FileUpload>中以字符串值的方式传到js里调用。我一共找到了两个方法予以解决，实现无刷新上传。
第一种方法：利用js的ADODB.Stream，将文件先转换成流，再通过js上传到服务器，这样有个好处就是可以上传超大文件，并且由于是数据流，可以支持断点续传、方便显示上传进度等人性化功能。唯一的缺点是要客户端浏览器需要设置安全级别，或者安装相关ActiveX控件（这个控件自己做的，加载到页面中）。
相关代码：
文件有：1个前台页面：upload.html、 1个js控制：upload.js、 1个后台处理页面：Accept.aspx(Accept.aspx.cs)
代码文件如下：
upload.html
![]()
1![]()
<html xmlns="http://www.w3.org/1999/xhtml" >
2![]()
<head runat="server">
3![]()
<title>无标题页</title>
4![]()
<mce:script src="upload.js" mce_src="upload.js" language="jscript" type="text/jscript"></mce:script>
5![]()
</head>
6![]()
<body>
7![]()
<form id="form1" runat="server">
8![]()
<div style="width:100%">
9![]()
<input type="file" id="hidFilePath" />
10![]()
<input type="button" id="ok" onclick="BeginUpLoadFile('0', true)" title="上传" value="UpLoad"/>
11![]()
</div>
12![]()
<div id="lblLeavingsTime">TIME</div>
13![]()
<div id="returnInfo">Info</div>
14![]()
</form>
15![]()
</body>
16![]()
</html>
1
<html xmlns="http://www.w3.org/1999/xhtml" >2
<head runat="server">3
<title>无标题页</title>4
<mce:script src="upload.js" mce_src="upload.js" language="jscript" type="text/jscript"></mce:script>5
</head>6
<body>7
<form id="form1" runat="server">8
<div style="width:100%">9
<input type="file" id="hidFilePath" />10
<input type="button" id="ok" onclick="BeginUpLoadFile('0', true)" title="上传" value="UpLoad"/>11
</div>12
<div id="lblLeavingsTime">TIME</div>13
<div id="returnInfo">Info</div>14
</form>15
</body>16
</html>
upload.js
1
var g_XMLHttp = null;2
var g_Stream = new ActiveXObject('ADODB.Stream');3
var g_SendCount = 0;4
var g_TotalCount = 0;5
var g_FileSize = 0;6
var g_UpFileType = 0 ;7
var g_BlockSize = 1024 * 100; //每段分为100K8
var fileExtName = "" ; //文件后缀名9
var g_PauseFlag = false;10
var g_BeginTime = null;11
var g_guageFlag = false ;12
var Nfilename = "" ;13
function Init()14
{15
InitTitleEvent();16
BeginUpLoadFile();17
}18
function MoveGuage()19
{20
var t_Time = new Date();21
var t_OddTime = Math.ceil((t_Time.getTime() - g_BeginTime.getTime()) / g_SendCount * (g_TotalCount - g_SendCount) / 1000);22
var t_OddTimeString = '';23
if(t_OddTime >= 3600)24
{25
t_OddTimeString = Math.floor(t_OddTime / 3600) + '时';26
t_OddTime %= 3600;27
}28
if(t_OddTime >= 60)29
{30
t_OddTimeString += Math.floor(t_OddTime / 60) + '分';31
t_OddTime %= 60;32
}33
document.all.lblLeavingsTime.innerText = t_OddTimeString + t_OddTime + '秒';34
}35
//第1个参数表示上传的类型，为命名新文件提供参考36
//第2个参数表示要不要显示状态条37
function BeginUpLoadFile(upFileType, guageFlag)38
{39
if(g_Stream == null)40
{alert("您的机器不支持ADODB.Stream."); }41
else42
{43
g_guageFlag = guageFlag ;44
g_UpFileType = upFileType;45
g_Stream.Type = 1;46
g_Stream.Open();47
var pth = document.getElementById("hidFilePath").value ;48
g_Stream.LoadFromFile(pth);49
var fname=pth.split('\\');50
Nfilename = fname[fname.length-1] ;51
fileExtName = Nfilename.split('.')[1].toLowerCase();52
g_Stream.position = 0;53
g_SendCount = 1;54
g_FileSize = g_Stream.size ;55
if (upFileType == 0) //上传图片56
{57
if (g_FileSize > 1024 * 1024 * 2 ) // 不能大于2M58
{59
document.all.returnInfo.innerText = "文件大小超过2M！" ;60
g_PauseFlag = true;61
return ;62
}63
var str = "bmp,jpg,jpeg,gif,png,icon";64
if (str.search(fileExtName) == -1) //图片格式不能超出范围65
{66
document.all.returnInfo.innerText = "文件格式不正确，请选择bmp、jpg、jpeg、gif、png、icon格式图片！" ;67
g_PauseFlag = true;68
return ;69
}70
}71
g_TotalCount = Math.ceil(g_Stream.size / g_BlockSize);72
g_BeginTime = new Date();73
SendData();74
}75
}76
function SendData()77
{78
if(g_PauseFlag)79
{80
return;81
}82
if(g_SendCount <= g_TotalCount)83
{84
var t_XMLDOM = null;85
var t_Root = null;86
var t_Node = null;87
var t_Attribute = null;88
t_XMLDOM = new ActiveXObject('Microsoft.XMLDOM');89
t_XMLDOM.async = false;90
t_XMLDOM.resolveExternals = false;91
t_Node = t_XMLDOM.createProcessingInstruction('xml','version="1.0"');92
t_XMLDOM.appendChild(t_Node);93
t_Root = t_XMLDOM.createElement('Root');94
t_XMLDOM.appendChild(t_Root);95
t_XMLDOM.documentElement.setAttribute('xmlns:dt','urn:schemas-microsoft-com:datatypes');96
t_Node = t_XMLDOM.createElement('Data');97
t_Node.dataType = 'bin.base64';98
t_Node.nodeTypedValue = g_Stream.Read(g_BlockSize);99
t_Attribute = t_XMLDOM.createAttribute('upfiletype');100
t_Attribute.value = g_UpFileType;101
t_Node.setAttributeNode(t_Attribute);102
t_Attribute = t_XMLDOM.createAttribute('fileindex');103
t_Attribute.value = g_SendCount;104
t_Node.setAttributeNode(t_Attribute);105
t_Attribute = t_XMLDOM.createAttribute('totalcount');106
t_Attribute.value = g_TotalCount;107
t_Node.setAttributeNode(t_Attribute);108
t_Attribute = t_XMLDOM.createAttribute('filesize');109
t_Attribute.value = g_FileSize;110
t_Node.setAttributeNode(t_Attribute);111
t_Attribute = t_XMLDOM.createAttribute('blocksize');112
t_Attribute.value = g_BlockSize;113
t_Node.setAttributeNode(t_Attribute);114
t_Attribute = t_XMLDOM.createAttribute('fileextname');115
t_Attribute.value = fileExtName;116
t_Node.setAttributeNode(t_Attribute);117
t_Root.appendChild(t_Node);118
g_XMLHttp = new ActiveXObject('Microsoft.XMLHttp');119
g_XMLHttp.open('POST','AcceptFile.aspx',true);120
g_XMLHttp.onreadystatechange = XMLHttpStateChange;121
g_XMLHttp.send(t_XMLDOM);122
if (g_guageFlag){ MoveGuage(); }123
}124
else125
{126
var xx = spider.BookFile.FileObj.getFileName() ;127
alert(xx.value) ;128
document.all.lblLeavingsTime.innerText = '0秒';129
CloseWindow(document.all.cmdClose);130
document.all.returnInfo.innerText = '文件上传完成！';131
}132
}133
function XMLHttpStateChange()134
{135
if(g_XMLHttp.readyState == 4)136
{137
var rstr = g_XMLHttp.responseText ;138
if(rstr == 'OK')139
{140
g_SendCount++;141
SendData();142
}143
else144
{145
document.all.returnInfo.innerText = rstr;146
CloseWindow(document.all.cmdClose);147
}148
}149
}150
function CloseWindow(p_OBJ)151
{152
g_PauseFlag = true;153
g_Stream.Close();154
}155
Accept.aspx
1![]()
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="AcceptFile.aspx.cs" Inherits="commonJS_AcceptFile" %>
2![]()
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="AcceptFile.aspx.cs" Inherits="commonJS_AcceptFile" %>2
Accept.aspx.cs
1
using System;2
using System.Data;3
using System.Configuration;4
using System.Collections;5
using System.Web;6
using System.Web.Security;7
using System.Web.UI;8
using System.Web.UI.WebControls;9
using System.Web.UI.WebControls.WebParts;10
using System.Web.UI.HtmlControls;11
using System.Xml;12
using System.IO;13
using spider.BookFile; //这是自己写的文件类14
public partial class commonJS_AcceptFile : System.Web.UI.Page15
{16
protected void Page_Load(object sender, EventArgs e)17
{18
AjaxPro.Utility.RegisterTypeForAjax(typeof(FileObj));19
XmlDocument t_XmlDocument = new XmlDocument();20
t_XmlDocument.Load(this.Request.InputStream);21
XmlNode t_XmlNode = t_XmlDocument.SelectSingleNode("Root/Data");22
FileObj t_FileOBJ = new FileObj();23
string t_upfiletype = t_XmlNode.Attributes["upfiletype"].Value;24
string t_FileIndex = t_XmlNode.Attributes["fileindex"].Value;25
string t_totalcount = t_XmlNode.Attributes["totalcount"].Value;26
string t_filesize = t_XmlNode.Attributes["filesize"].Value;27
string t_blocksize = t_XmlNode.Attributes["blocksize"].Value;28
string t_fileextname = t_XmlNode.Attributes["fileextname"].Value;29
byte[] t_File = Convert.FromBase64String(t_XmlNode.FirstChild.Value);30
FileObj.upfile myUpFile = new FileObj.upfile();31
myUpFile.FileCount = t_totalcount;32
myUpFile.FileIndex = t_FileIndex;33
myUpFile.UpFileType = t_upfiletype;34
myUpFile.FileSize = t_filesize;35
myUpFile.BlockSize = t_blocksize;36
myUpFile.ExtName = t_fileextname;37
myUpFile.t_File = t_File;38
FileObj.InsertFileList(myUpFile);39
if (FileObj.getErrMsg == "")40
{41
this.Response.Write("OK");42
}43
else44
{45
this.Response.Write(FileObj.getErrMsg);46
}47
}48
}49
第二种方法：用js动态创建form和iframe上传文件，实现无刷新。优点是代码量小，无需客户端安装控件，缺点就是上传有限制大小，下面看代码：
需要文件有：1个前台页面upload.html、
1个js函数 function upFile、 1个处理文件accept.aspx(accept.aspx.cs)
upload.html
![]()
1![]()
<html xmlns="http://www.w3.org/1999/xhtml" >
2![]()
<head runat="server">
3![]()
<title>无标题页</title>
4![]()
<mce:script src="upload.js" mce_src="upload.js" language="jscript" type="text/jscript"></mce:script>
5![]()
</head>
6![]()
<body>
7![]()
<form id="form1" runat="server">
8![]()
<div style="width:100%">
9![]()
<iframe name='hidden_frame' id="hidden_frame" style='width:150px; height:50px; display:none;'> </iframe>
10![]()
<input type="file" id="hidFilePath" />
11![]()
<input id="upBtn" type="button" class="clearBtn" style="display:none;" value="上传图片" onclick="upFile('hidFilePath');" />
12![]()
</div>
13![]()
</form>
14![]()
</body>
15![]()
</html>
1
<html xmlns="http://www.w3.org/1999/xhtml" >2
<head runat="server">3
<title>无标题页</title>4
<mce:script src="upload.js" mce_src="upload.js" language="jscript" type="text/jscript"></mce:script>5
</head>6
<body>7
<form id="form1" runat="server">8
<div style="width:100%">9
<iframe name='hidden_frame' id="hidden_frame" style='width:150px; height:50px; display:none;'> </iframe>10
<input type="file" id="hidFilePath" />11
<input id="upBtn" type="button" class="clearBtn" style="display:none;" value="上传图片" onclick="upFile('hidFilePath');" />12
</div>13
</form>14
</body>15
</html>
function upFile
1
function upFile(ob)2
{3
var file = document.getElementById(ob) ;4
var newName = "FileName"; //设置文件保存的名字5
var form=document.createElement('form');6
document.body.appendChild(form);7
form.encoding="multipart/form-data";8
form.method = "post";9
form.action= "accept.aspx?nm=" + newName;10
form.target= "hidden_frame";11
var pos=file.nextSibling; //记住file在旧表单中的的位置12
form.appendChild(file);13
form.submit();14
pos.parentNode.insertBefore(file,pos);15
document.body.removeChild(form);16
}17
accept.aspx
1![]()
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="up.aspx.cs" Inherits="Member_up" %>
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="up.aspx.cs" Inherits="Member_up" %>
accept.aspx.cs
1
using System;2
using System.Data;3
using System.Configuration;4
using System.Collections;5
using System.Web;6
using System.Web.Security;7
using System.Web.UI;8
using System.Web.UI.WebControls;9
using System.Web.UI.WebControls.WebParts;10
using System.Web.UI.HtmlControls;11
public partial class Member_up : System.Web.UI.Page12
{13
protected void Page_Load(object sender, EventArgs e)14
{15
string mz = HttpContext.Current.Request.QueryString["nm"].ToString();16
string uperr = "";17
HttpFileCollection files = HttpContext.Current.Request.Files;18
if (files.Count>0)19
{ uperr = upSingleFile(files[0], mz); }20
else { uperr = "ok"; }21
HttpContext.Current.Session["upInfo"] = uperr;22
Response.Write(uperr);23
}24
//上传文件25
private string upSingleFile(HttpPostedFile file, String theFileName)26
{27
string infos = "";28
bool fileOK = false;29
string fileName, fileExtension ;30
fileName = System.IO.Path.GetFileName(file.FileName);31
if (fileName != "")32
{33
if (file.ContentLength >= 1024 * 1024 * 2)34
{35
infos = "上传文件太大，目前仅支持2M以内的图片上传！";36
}37
else38
{39
fileExtension = System.IO.Path.GetExtension(fileName).ToLower();40
String[] allowedExtensions = { ".jpg", ".jpeg", ".gif", ".bmp", ".png", ".icon" };41
for (int i = 0; i < allowedExtensions.Length; i++)42
{43
if (fileExtension == allowedExtensions[i])44
{45
fileOK = true;46
break;47
}48
}49
if (!fileOK)50
{51
infos = "不支持上传此类型文件！目前支持的图片格式有：jpg|jpeg|gif|bmp|png|icon";52
}53
else54
{55
file.SaveAs(System.Web.HttpContext.Current.Request.MapPath("~/books/BookPic/") + theFileName);56
infos = "ok" + theFileName;57
}58
}59
}60
else61
{62
infos = "没有读取到文件！";63
}64
return infos;65
}66
}
浙公网安备 33010602011771号