当前位置:跳过导航链接计算机毕业设计首页 : 技术应用 : 详细内容

ASP.NET上传文件显示进度条

来源:转载 作者:管理员 添加时间:2011-08-18 点击数:2482

使用asp.net上传文件时,为了更好的增加用户体验,往往需要增加上传进度提示,这样会更好的提高用户的操作性。效果图如下:

计算机毕业论文

计算机毕业论文

下面就来分享下具体代码:

以下是部分代码:

<form id="form1" runat="server">   <asp:ScriptManager ID="scriptManager" runat="server" EnablePageMethods="true" />      <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);       }      script>      <div>       <div class="upload">           <h3>文件上传h3>           <div>               <iframe id="uploadFrame" frameborder="0" scrolling="no" src="Upload.aspx">iframe>               <mb:ProgressControl ID="progress" runat="server" CssClass="lightblue" 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>

upload.aspx:〖资料来源:计算机毕业论文 http://www.xiaoniu168.com〗

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;    }}

打包下载源代码:fileupload.rar

<责任编辑:计算机毕业设计网(http://www.xiaoniu168.com)>

第1页

【联系方式】

【本站信誉】

用心做计算机毕业设计论文网