欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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