asp.net大文件上传,AJAX显示进度条(结束)

最新推荐文章于 2024-07-24 22:04:52 发布

jetsteven

最新推荐文章于 2024-07-24 22:04:52 发布

阅读量4.7k

点赞数 1

分类专栏： JQUERY .Net C# 文章标签： asp.net ajax stylesheet 文件上传组件 function upload

本文链接：https://blog.csdn.net/jetsteven/article/details/4545942

版权

.Net C# 同时被 2 个专栏收录

6 篇文章 0 订阅

订阅专栏

JQUERY

5 篇文章 0 订阅

订阅专栏

文档目录图
upload.aspx 上传文件页
upload.js 为处理进度js
后台处理文件。组件用的是高上来客的

upload.aspx

<!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><title> 上传 </title><link href="../../Utility/CSS/common.css" mce_href="Utility/CSS/common.css" rel="stylesheet" type="text/css" /> <mce:script type="text/javascript" src="/WebResource.axd?d=KeDZ3k5NPmMb85FroUcNG-ZqJghV9XQPlBWTERBLw6q8kkol_LQbYf30RIR9VvPDQsd1gOreRBNVpgtBHfEIYQ2&t=633883522500000000" mce_src="WebResource.axd?d=KeDZ3k5NPmMb85FroUcNG-ZqJghV9XQPlBWTERBLw6q8kkol_LQbYf30RIR9VvPDQsd1gOreRBNVpgtBHfEIYQ2&t=633883522500000000" ></mce:script> <mce:script type="text/javascript" src="/WebResource.axd?d=KeDZ3k5NPmMb85FroUcNG-ZqJghV9XQPlBWTERBLw6ppa5X--qxkMzmS_wj2u95w0&t=633883522500000000" mce_src="WebResource.axd?d=KeDZ3k5NPmMb85FroUcNG-ZqJghV9XQPlBWTERBLw6ppa5X--qxkMzmS_wj2u95w0&t=633883522500000000" ></mce:script> <mce:script type="text/javascript" src="/WebResource.axd?d=KeDZ3k5NPmMb85FroUcNG7CKZk41hJXoreK-LCwJd8FEayi1ebZ-moLDUC2sppFuGMW_AW2JCnJVIYWlLZgLNA2&t=633883522500000000" mce_src="WebResource.axd?d=KeDZ3k5NPmMb85FroUcNG7CKZk41hJXoreK-LCwJd8FEayi1ebZ-moLDUC2sppFuGMW_AW2JCnJVIYWlLZgLNA2&t=633883522500000000" ></mce:script> <link href="/WebResource.axd?d=KeDZ3k5NPmMb85FroUcNG1XC1_cRqxRrPLO047WppE5FjwrQyglDWoaRL8xvAGdz0&t=633883522500000000" mce_href="WebResource.axd?d=KeDZ3k5NPmMb85FroUcNG1XC1_cRqxRrPLO047WppE5FjwrQyglDWoaRL8xvAGdz0&t=633883522500000000" type="text/css" rel="Stylesheet" rev="Stylesheet" /><link href="/WebResource.axd?d=KeDZ3k5NPmMb85FroUcNG1XC1_cRqxRrPLO047WppE6n8FkrYdqvwvtuzhtbC_gV0&t=633883522500000000" mce_href="WebResource.axd?d=KeDZ3k5NPmMb85FroUcNG1XC1_cRqxRrPLO047WppE6n8FkrYdqvwvtuzhtbC_gV0&t=633883522500000000" type="text/css" rel="Stylesheet" rev="Stylesheet" /><link href="/WebResource.axd?d=8zgUjX4ZiwU9HtcJwYZGLBl1WQcbAwWx6Ws6G7vm-2s1&t=633883522500000000" mce_href="WebResource.axd?d=8zgUjX4ZiwU9HtcJwYZGLBl1WQcbAwWx6Ws6G7vm-2s1&t=633883522500000000" type="text/css" rel="Stylesheet" rev="Stylesheet" /></head> <body> <form name="uploadForm" method="post" action="upload.aspx" id="uploadForm" enctype="multipart/form-data"> <div> <input type="hidden" name="UploadID" id="UploadID" value="1516a444-b167-4b3d-b27b-f0689874c74e" /> <input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUKLTMyNzE0MDcyMg9kFgICAw8WAh4HZW5jdHlwZQUTbXVsdGlwYXJ0L2Zvcm0tZGF0YWRkRa2yIKlbL4VU2Wjamax4EUjzSuQ=" /> </div> <mce:script src="/WebResource.axd?d=KeDZ3k5NPmMb85FroUcNG-ZqJghV9XQPlBWTERBLw6qlm-EwnLHDpsr_MAzRFWAsKtSEiQiS6zW6S_ntS8J-Lg2&t=633883522500000000" mce_src="WebResource.axd?d=KeDZ3k5NPmMb85FroUcNG-ZqJghV9XQPlBWTERBLw6qlm-EwnLHDpsr_MAzRFWAsKtSEiQiS6zW6S_ntS8J-Lg2&t=633883522500000000" type="text/javascript"></mce:script> <mce:script type="text/javascript"></mce:script> <div> <mce:script src="../../Utility/jQuery/Ajax/jquery.form.js" mce_src="Utility/jQuery/Ajax/jquery.form.js" type="text/javascript"></mce:script> <mce:script src="../../Utility/jQuery/upLoad/jquery.MultiFile.pack.js" mce_src="Utility/jQuery/upLoad/jquery.MultiFile.pack.js" type="text/javascript"></mce:script> <mce:script src="upload.js" mce_src="upload.js" type="text/javascript"></mce:script> <input id="myfile" type="file" name="File11" /><input id="Submit1" type="submit" value="上传" /></div> <div id="ui" /> <div id="output"> </div> <div id="pbar" style="width:400px;"> </div> <input id="btn_cancel" type="button" value="取消上传" /> </div> </form> </body> </html

upload.js

var inte; $(function() { $("#myfile").MultiFile(); $('#uploadForm').ajaxForm({ beforeSubmit: function(a,f,o) { o.dataType = "json"; $.blockUI({ message: $('#ui')}); inte = self.setInterval("getprogress()",500); } }); $('#btn_cancel').click(function() { var uploadid = $("#UploadID").val(); $.ajax({ type: "POST", dataType: "json", async : false, url: "upload_ajax.ashx", data: "UploadID=" + uploadid + "&cancel=true", success: function(obj){ $("#output").html(obj.msg); inte = self.clearInterval(inte); $.unblockUI(); } }); }); }); function getprogress() { var uploadid = $("#UploadID").val() $.ajax({ type: "POST", dataType: "json", async : false, url: "upload_ajax.ashx", data: "UploadID=" + uploadid, success: function(obj){ var p = obj.msg.Readedlength/obj.msg.TotalLength * 100; var info= "<p>当前上传文件:" + obj.msg.CurrentFile; info += "<br>" + obj.msg.FormatStatus + obj.msg.Status; info += "<br>速度:" + obj.msg.FormatRatio; info += "<br>剩余时间:" + obj.msg.LeftTime; info += "</p>"; $("#output").html(info); $('#pbar').progressbar('option', 'value', p); $('#pbar div').html(p.toFixed(2) + "%"); if(obj.msg.Status == 4 ) { inte = self.clearInterval(inte); $.unblockUI(); window.location.reload(); } } }); }

upload_ajax.ashx

using System; using System.Collections; using System.Data; using System.Linq; using System.Web; using System.Web.Services; using System.Web.Services.Protocols; using System.Xml.Linq; using F35; using BasicFx.Utils; namespace bigFile.u { /// <summary> /// $codebehindclassname$ 的摘要说明 /// </summary> [WebService(Namespace = "http://tempuri.org/")] [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)] public class upload_ajax : IHttpHandler { private string template = "{{statue:'{0}',msg:{1}}}"; public void ProcessRequest(HttpContext context) { context.Response.ContentType = "text/plain"; try { string guid = context.Request.Form["UploadID"]; string cancel =context.Request.Form["cancel"]; if (!string.IsNullOrEmpty(cancel)) { throw new Exception("用户取消"); } UploadContext c = UploadContextFactory.GetUploadContext(guid); string json = Newtonsoft.Json.JsonConvert.SerializeObject(c); WebHelper.WriteResultJson(1, json, context,template); }catch (Exception err) { WebHelper.WriteResultJson(0, err.Message, context); } } public bool IsReusable { get { return false; } } } }

在web.config中配置

BigFile.BigFileUploadModuleHandle,BigFileUploadHandle 请参照

Asp.NET大文件上传组件开发总结(六)---大文件上传组件使用说明

上传的效果图

preview

备注：

js用到了 Jquery 1.32

Forms 用于AJAX提交

jquery.MultiFile.pack.js 上传多个文件

jQuery UI Progressbar 进度条

blockUI 提示

c#组件用到了

Newtonsoft.Json 用于对象到JSON的相互转换

WebHelper.WriteResultJson(只是格式化json);

jetsteven

关注

1
点赞
踩
14

收藏

觉得还不错? 一键收藏
26
评论
asp.net大文件上传,AJAX显示进度条(结束)

文档目录图upload.aspx 上传文件页upload.js 为处理进度js后台处理文件。组件用的是高上来客的upload.aspx 上传 <!-- $(function(){ $(#pbar).progres
复制链接

扫一扫

专栏目录