asp.net javascript 文件无刷新上传实例代码第1/2页
程序员文章站
2022-07-04 17:18:58
在新增数据项的时候，用ajax实现无刷新提交，但上传文件的时候，由于数据类型原因，不能将页面的中以字符串值的方式传到js里调用。...
在新增数据项的时候，用ajax实现无刷新提交，但上传文件的时候，由于数据类型原因，不能将页面的<asp:fileupload>中以字符串值的方式传到js里调用。我一共找到了两个方法予以解决，实现无刷新上传。
第一种方法：利用js的adodb.stream，将文件先转换成流，再通过js上传到服务器，这样有个好处就是可以上传超大文件，并且由于是数据流，可以支持断点续传、方便显示上传进度等人性化功能。唯一的缺点是要客户端浏览器需要设置安全级别，或者安装相关activex控件（这个控件自己做的，加载到页面中）。
相关代码：
文件有：1个前台页面：upload.html、 1个js控制：upload.js、 1个后台处理页面：accept.aspx(accept.aspx.cs)
代码文件如下：
upload.html
复制代码 代码如下:
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>无标题页</title>
<script src="upload.js" src="upload.js" language="jscript" type="text/jscript"></script>
</head>
<body>
<form id="form1" runat="server">
<div style="width:100%">
<input type="file" id="hidfilepath" />
<input type="button" id="ok" onclick="beginuploadfile('0', true)" title="上传" value="upload"/>
</div>
<div id="lblleavingstime">time</div>
<div id="returninfo">info</div>
</form>
</body>
</html>
upload.js
复制代码 代码如下:
var g_xmlhttp = null;
var g_stream = new activexobject('adodb.stream');
var g_sendcount = 0;
var g_totalcount = 0;
var g_filesize = 0;
var g_upfiletype = 0 ;
var g_blocksize = 1024 * 100; //每段分为100k
var fileextname = "" ; //文件后缀名
var g_pauseflag = false;
var g_begintime = null;
var g_guageflag = false ;
var nfilename = "" ;
function init()
{
inittitleevent();
beginuploadfile();
}
function moveguage()
{
var t_time = new date();
var t_oddtime = math.ceil((t_time.gettime() - g_begintime.gettime()) / g_sendcount * (g_totalcount - g_sendcount) / 1000);
var t_oddtimestring = '';
if(t_oddtime >= 3600)
{
t_oddtimestring = math.floor(t_oddtime / 3600) + '时';
t_oddtime %= 3600;
}
if(t_oddtime >= 60)
{
t_oddtimestring += math.floor(t_oddtime / 60) + '分';
t_oddtime %= 60;
}
document.all.lblleavingstime.innertext = t_oddtimestring + t_oddtime + '秒';
}
//第1个参数表示上传的类型，为命名新文件提供参考
//第2个参数表示要不要显示状态条
function beginuploadfile(upfiletype, guageflag)
{
if(g_stream == null)
{alert("您的机器不支持adodb.stream."); }
else
{
g_guageflag = guageflag ;
g_upfiletype = upfiletype;
g_stream.type = 1;
g_stream.open();
var pth = document.getelementbyid("hidfilepath").value ;
g_stream.loadfromfile(pth);
var fname=pth.split('\\');
nfilename = fname[fname.length-1] ;
fileextname = nfilename.split('.')[1].tolowercase();
g_stream.position = 0;
g_sendcount = 1;
g_filesize = g_stream.size ;
if (upfiletype == 0) //上传图片
{
if (g_filesize > 1024 * 1024 * 2 ) // 不能大于2m
{
document.all.returninfo.innertext = "文件大小超过2m！" ;
g_pauseflag = true;
return ;
}
var str = "bmp,jpg,jpeg,gif,png,icon";
if (str.search(fileextname) == -1) //图片格式不能超出范围
{
document.all.returninfo.innertext = "文件格式不正确，请选择bmp、jpg、jpeg、gif、png、icon格式图片！" ;
g_pauseflag = true;
return ;
}
}
g_totalcount = math.ceil(g_stream.size / g_blocksize);
g_begintime = new date();
senddata();
}
}
function senddata()
{
if(g_pauseflag)
{
return;
}
if(g_sendcount <= g_totalcount)
{
var t_xmldom = null;
var t_root = null;
var t_node = null;
var t_attribute = null;
t_xmldom = new activexobject('microsoft.xmldom');
t_xmldom.async = false;
t_xmldom.resolveexternals = false;
t_node = t_xmldom.createprocessinginstruction('xml','version="1.0"');
t_xmldom.appendchild(t_node);
t_root = t_xmldom.createelement('root');
t_xmldom.appendchild(t_root);
t_xmldom.documentelement.setattribute('xmlns:dt','urn:schemas-microsoft-com:datatypes');
t_node = t_xmldom.createelement('data');
t_node.datatype = 'bin.base64';
t_node.nodetypedvalue = g_stream.read(g_blocksize);
t_attribute = t_xmldom.createattribute('upfiletype');
t_attribute.value = g_upfiletype;
t_node.setattributenode(t_attribute);
t_attribute = t_xmldom.createattribute('fileindex');
t_attribute.value = g_sendcount;
t_node.setattributenode(t_attribute);
t_attribute = t_xmldom.createattribute('totalcount');
t_attribute.value = g_totalcount;
t_node.setattributenode(t_attribute);
t_attribute = t_xmldom.createattribute('filesize');
t_attribute.value = g_filesize;
t_node.setattributenode(t_attribute);
t_attribute = t_xmldom.createattribute('blocksize');
t_attribute.value = g_blocksize;
t_node.setattributenode(t_attribute);
t_attribute = t_xmldom.createattribute('fileextname');
t_attribute.value = fileextname;
t_node.setattributenode(t_attribute);
t_root.appendchild(t_node);
g_xmlhttp = new activexobject('microsoft.xmlhttp');
g_xmlhttp.open('post','acceptfile.aspx',true);
g_xmlhttp.onreadystatechange = xmlhttpstatechange;
g_xmlhttp.send(t_xmldom);
if (g_guageflag){ moveguage(); }
}
else
{
var xx = spider.bookfile.fileobj.getfilename() ;
alert(xx.value) ;
document.all.lblleavingstime.innertext = '0秒';
closewindow(document.all.cmdclose);
document.all.returninfo.innertext = '文件上传完成！';
}
}
function xmlhttpstatechange()
{
if(g_xmlhttp.readystate == 4)
{
var rstr = g_xmlhttp.responsetext ;
if(rstr == 'ok')
{
g_sendcount++;
senddata();
}
else
{
document.all.returninfo.innertext = rstr;
closewindow(document.all.cmdclose);
}
}
}
function closewindow(p_obj)
{
g_pauseflag = true;
g_stream.close();
}
accept.aspx
复制代码 代码如下:
<%@ page language="c#" autoeventwireup="true" codefile="acceptfile.aspx.cs" inherits="commonjs_acceptfile" %>
accept.aspx.cs
复制代码 代码如下:
using system;
using system.data;
using system.configuration;
using system.collections;
using system.web;
using system.web.security;
using system.web.ui;
using system.web.ui.webcontrols;
using system.web.ui.webcontrols.webparts;
using system.web.ui.htmlcontrols;
using system.xml;
using system.io;
using spider.bookfile; //这是自己写的文件类
public partial class commonjs_acceptfile : system.web.ui.page
{
protected void page_load(object sender, eventargs e)
{
ajaxpro.utility.registertypeforajax(typeof(fileobj));
xmldocument t_xmldocument = new xmldocument();
t_xmldocument.load(this.request.inputstream);
xmlnode t_xmlnode = t_xmldocument.selectsinglenode("root/data");
fileobj t_fileobj = new fileobj();
string t_upfiletype = t_xmlnode.attributes["upfiletype"].value;
string t_fileindex = t_xmlnode.attributes["fileindex"].value;
string t_totalcount = t_xmlnode.attributes["totalcount"].value;
string t_filesize = t_xmlnode.attributes["filesize"].value;
string t_blocksize = t_xmlnode.attributes["blocksize"].value;
string t_fileextname = t_xmlnode.attributes["fileextname"].value;
byte[] t_file = convert.frombase64string(t_xmlnode.firstchild.value);
fileobj.upfile myupfile = new fileobj.upfile();
myupfile.filecount = t_totalcount;
myupfile.fileindex = t_fileindex;
myupfile.upfiletype = t_upfiletype;
myupfile.filesize = t_filesize;
myupfile.blocksize = t_blocksize;
myupfile.extname = t_fileextname;
myupfile.t_file = t_file;
fileobj.insertfilelist(myupfile);
if (fileobj.geterrmsg == "")
{
this.response.write("ok");
}
else
{
this.response.write(fileobj.geterrmsg);
}
}
}
1
上一篇： Vue中的字符串模板的使用
下一篇： sz.reg转换成reg.bat的批处理