asp.net文件上传带进度条实现案例(多种风格)
程序员文章站
2024-02-17 10:40:46
先饱饱眼福:
在之前的文章中也有类似带进度条文件传送的案例,大家可以翻阅之前的文章对知识点进行扩充。
部分代码:
<%@ 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; } }
代码就不贴完了,直接上干货,亲,这可是免邮的哦!
上一篇: js取出对象数组中对应的value值
下一篇: Smarty简单生成表单元素的方法示例