asp.net文件上传带进度条实现案例（多种风格）
程序员文章站
2023-12-20 19:20:34
先饱饱眼福：
在之前的文章中也有类似带进度条文件传送的案例，大家可以翻阅之前的文章对知识点进行扩充。
部分代码：
<%@ page...
先饱饱眼福：
在之前的文章中也有类似带进度条文件传送的案例，大家可以翻阅之前的文章对知识点进行扩充。
部分代码：
<%@ page language="c#" %>
<%@ register assembly="mattberseth.webcontrols.ajax" namespace="mattberseth.webcontrols.ajax.progress" tagprefix="mb" %>
<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>untitled page</title>
<link rel="stylesheet" href="_assets/css/progress.css" mce_href="_assets/css/progress.css" />
<link rel="stylesheet" href="_assets/css/upload.css" mce_href="_assets/css/upload.css" />
<mce:style type="text/css"><!--
body{ font-family:arial, sans-serif; font-size:12px;}
--></mce:style><style type="text/css" mce_bogus="1"> body{ font-family:arial, sans-serif; font-size:12px;}
</style>
<mce:script type="text/c#" runat="server"><!--
protected void page_load(object sender, eventargs args)
{
if (!this.ispostback)
{
this.session["uploadinfo"] = new uploadinfo { isready = false };
}
}
/// <summary>
///
/// </summary>
[system.web.services.webmethod]
[system.web.script.services.scriptmethod]
public static object getuploadstatus()
{
//获取文件长度
uploadinfo info = httpcontext.current.session["uploadinfo"] as uploadinfo;
if (info != null && info.isready)
{
int sofar = info.uploadedlength;
int total = info.contentlength;
int percentcomplete = (int)math.ceiling((double)sofar / (double)total * 100);
string message = string.format("上传 {0} ... {1} of {2} 字节", info.filename, sofar, total);
// 返回百分比
return new { percentcomplete = percentcomplete, message = message };
}
// 还没有准备好...
return null;
}
// --></mce:script>
</head>
<body>
<form id="form1" runat="server">
<asp:scriptmanager id="scriptmanager" runat="server" enablepagemethods="true" />
<mce:script type="text/javascript"><!--
var intervalid = 0;
var progressbar;
var fileupload;
var form;
// 进度条
function pageload(){
$addhandler($get('upload'), 'click', onuploadclick);
progressbar = $find('progress');
}
// 注册表单
function register(form, fileupload){
this.form = form;
this.fileupload = fileupload;
}
//上传验证
function onuploadclick() {
var vaild = fileupload.value.length > 0;
if(vaild){
$get('upload').disabled = 'disabled';
updatemessage('info', '初始化上传...');
//提交上传
form.submit();
// 隐藏frame
sys.ui.domelement.addcssclass($get('uploadframe'), 'hidden');
// 0开始显示进度条
progressbar.set_percentage(0);
progressbar.show();
// 上传过程
intervalid = window.setinterval(function(){
pagemethods.getuploadstatus(function(result){
if(result){
// 更新进度条为新值
progressbar.set_percentage(result.percentcomplete);
//更新信息
updatemessage('info', result.message);
if(result == 100){
// 自动消失
window.clearinterval(intervalid);
}
}
});
}, 500);
}
else{
oncomplete('error', '您必需选择一个文件');
}
}
function oncomplete(type, msg){
// 自动消失
window.clearinterval(intervalid);
// 显示消息
updatemessage(type, msg);
// 隐藏进度条
progressbar.hide();
progressbar.set_percentage(0);
// 重新启用按钮
$get('upload').disabled = '';
// 显示frame
sys.ui.domelement.removecssclass($get('uploadframe'), 'hidden');
}
function updatemessage(type, value){
var status = $get('status');
status.innerhtml = value;
// 移除样式
status.classname = '';
sys.ui.domelement.addcssclass(status, type);
}
// --></mce:script>
<div>
<div class="upload">
<h3>文件上传</h3>
<div>
<iframe id="uploadframe" frameborder="0" scrolling="no" src="upload.aspx" mce_src="upload.aspx"></iframe>
<mb:progresscontrol id="progress" runat="server" cssclass="lightblue" style="display:none" mce_style="display:none" value="0" mode="manual" speed=".4" width="100%" />
<div>
<div id="status" class="info">请选择要上传的文件</div>
<div class="commands">
<input id="upload" type="button" value="上传" />
</div>
</div>
</div>
</div>
</div>
</form>
</body>
</html>
upload.aspx:
//限制大小 1m
protected void page_load2(object sender, eventargs e)
{
if (this.ispostback)
{
uploadinfo uploadinfo = this.session["uploadinfo"] as uploadinfo;
if (uploadinfo == null)
{
// 让父页面知道无法处理上传
const string js = "window.parent.oncomplete('error', '无法上传文件。请刷新页面，然后再试一次);";
scriptmanager.registerstartupscript(this, typeof(upload_aspx), "progress", js, true);
}
else
{
// 让服务端知道我们还没有准备好..
uploadinfo.isready = false;
// 上传验证
if (this.fileupload.postedfile != null && this.fileupload.postedfile.contentlength > 0
&& this.fileupload.postedfile.contentlength < 1048576)// 限制1m
{
// 设置路径
string path = this.server.mappath(@"uploads");
string filename = path.getfilename(this.fileupload.postedfile.filename);
// 上传信息
uploadinfo.contentlength = this.fileupload.postedfile.contentlength;
uploadinfo.filename = filename;
uploadinfo.uploadedlength = 0;
//文件存在 初始化...
uploadinfo.isready = true;
//缓存
int buffersize = 1;
byte[] buffer = new byte[buffersize];
// 保存字节
using (filestream fs = new filestream(path.combine(path, filename), filemode.create))
{
while (uploadinfo.uploadedlength < uploadinfo.contentlength)
{
//从输入流放进缓冲区
int bytes = this.fileupload.postedfile.inputstream.read(buffer, 0, buffersize);
// 字节写入文件流
fs.write(buffer, 0, bytes);
// 更新大小
uploadinfo.uploadedlength += bytes;
// 线程睡眠 上传就更慢 这样就可以看到进度条了
system.threading.thread.sleep(100);
}
}
// 删除.
file.delete(path.combine(path, filename));
// 让父页面知道已经处理上传完毕
const string js = "window.parent.oncomplete('success', '{0} 已成功上传');";
scriptmanager.registerstartupscript(this, typeof(upload_aspx), "progress", string.format(js, filename), true);
}
else
{
if (this.fileupload.postedfile.contentlength >= 1048576)//1m
{
const string js = "window.parent.oncomplete('error', '超出上传文件限制大小，请重新选择');";
scriptmanager.registerstartupscript(this, typeof(upload_aspx), "progress", js, true);
}
else
{
const string js = "window.parent.oncomplete('error', '上传文件出错');";
scriptmanager.registerstartupscript(this, typeof(upload_aspx), "progress", js, true);
}
}
uploadinfo.isready = false;
}
}
}
// 不限制大小
protected void page_load(object sender, eventargs e)
{
if (this.ispostback)
{
uploadinfo uploadinfo = this.session["uploadinfo"] as uploadinfo;
uploadinfo.isready = false;
if (this.fileupload.postedfile != null && this.fileupload.postedfile.contentlength > 0)
{
string path = this.server.mappath(@"uploads");
string filename = path.getfilename(this.fileupload.postedfile.filename);
uploadinfo.contentlength = this.fileupload.postedfile.contentlength;
uploadinfo.filename = filename;
uploadinfo.uploadedlength = 0;
uploadinfo.isready = true;
int buffersize = 1;
byte[] buffer = new byte[buffersize];
using (filestream fs = new filestream(path.combine(path, filename), filemode.create))
{
while (uploadinfo.uploadedlength < uploadinfo.contentlength)
{
int bytes = this.fileupload.postedfile.inputstream.read(buffer, 0, buffersize);
fs.write(buffer, 0, bytes);
uploadinfo.uploadedlength += bytes;
}
}
const string js = "window.parent.oncomplete('success', '{0} 已成功上传');";
scriptmanager.registerstartupscript(this, typeof(upload_aspx), "progress", string.format(js, filename), true);
}
else
{
const string js = "window.parent.oncomplete('error', '上传文件出错');";
scriptmanager.registerstartupscript(this, typeof(upload_aspx), "progress", js, true);
}
uploadinfo.isready = false;
}
}
代码就不贴完了，直接上干货，亲，这可是免邮的哦！