Java学习者论坛

 找回密码
 立即注册

QQ登录

只需一步,快速开始

手机号码,快捷登录

恭喜Java学习者论坛(https://www.javaxxz.com)已经为数万Java学习者服务超过8年了!积累会员资料超过10000G+
成为本站VIP会员,下载本站10000G+会员资源,购买链接:点击进入购买VIP会员
JAVA高级面试进阶视频教程Java架构师系统进阶VIP课程

分布式高可用全栈开发微服务教程

Go语言视频零基础入门到精通

Java架构师3期(课件+源码)

Java开发全终端实战租房项目视频教程

SpringBoot2.X入门到高级使用教程

大数据培训第六期全套视频教程

深度学习(CNN RNN GAN)算法原理

Java亿级流量电商系统视频教程

互联网架构师视频教程

年薪50万Spark2.0从入门到精通

年薪50万!人工智能学习路线教程

年薪50万!大数据从入门到精通学习路线年薪50万!机器学习入门到精通视频教程
仿小米商城类app和小程序视频教程深度学习数据分析基础到实战最新黑马javaEE2.1就业课程从 0到JVM实战高手教程 MySQL入门到精通教程
查看: 1714|回复: 0

[默认分类] 文件上传 带进度条(多种风格)

[复制链接]
  • TA的每日心情
    开心
    2021-12-13 21:45
  • 签到天数: 15 天

    [LV.4]偶尔看看III

    发表于 2018-7-13 14:50:45 | 显示全部楼层 |阅读模式
    文件上传 带进度条 多种风格 非常漂亮!







    友好的提示 以及上传验证!








    部分代码:
    1. <form id="form1" runat="server">
    2.    <asp:ScriptManager ID="scriptManager" runat="server" EnablePageMethods="true" />
    3.    
    4.    <script type="text/javascript">
    5.        var intervalID = 0;
    6.        var progressBar;
    7.        var fileUpload;
    8.        var form;      
    9.        // 进度条      
    10.        function pageLoad(){           
    11.            $addHandler($get("upload"), "click", onUploadClick);
    12.            progressBar = $find("progress");
    13.        }
    14.        // 注册表单      
    15.        function register(form, fileUpload){            
    16.            this.form = form;
    17.            this.fileUpload = fileUpload;
    18.        }        
    19.        //上传验证
    20.        function onUploadClick() {        
    21.            var vaild = fileUpload.value.length > 0;
    22.            if(vaild){              
    23.                $get("upload").disabled = "disabled";            
    24.                updateMessage("info", "初始化上传...");               
    25.                //提交上传
    26.                form.submit();               
    27.                // 隐藏frame
    28.                Sys.UI.DomElement.addCssClass($get("uploadFrame"), "hidden");
    29.                // 0开始显示进度条
    30.                progressBar.set_percentage(0);
    31.                progressBar.show();           
    32.                // 上传过程
    33.                intervalID = window.setInterval(function(){
    34.                    PageMethods.GetUploadStatus(function(result){
    35.                        if(result){
    36.                            //  更新进度条为新值
    37.                            progressBar.set_percentage(result.percentComplete);
    38.                            //更新信息
    39.                            updateMessage("info", result.message);
    40.                            
    41.                            if(result == 100){
    42.                                // 自动消失
    43.                                window.clearInterval(intervalID);                        
    44.                            }
    45.                        }
    46.                    });
    47.                }, 500);               
    48.            }
    49.            else{
    50.                onComplete("error", "您必需选择一个文件");
    51.            }
    52.        }      
    53.    
    54.        function onComplete(type, msg){
    55.            // 自动消失
    56.            window.clearInterval(intervalID);
    57.            // 显示消息
    58.            updateMessage(type, msg);
    59.            // 隐藏进度条
    60.            progressBar.hide();
    61.            progressBar.set_percentage(0);
    62.            // 重新启用按钮
    63.            $get("upload").disabled = "";
    64.            //  显示frame
    65.            Sys.UI.DomElement.removeCssClass($get("uploadFrame"), "hidden");
    66.        }        
    67.        function updateMessage(type, value){
    68.            var status = $get("status");
    69.            status.innerHTML = value;
    70.            // 移除样式
    71.            status.className = "";
    72.            Sys.UI.DomElement.addCssClass(status, type);
    73.        }
    74.    
    75.    </script>
    76.    
    77.    <div>
    78.        <div class="upload">
    79.            <h3>文件上传</h3>
    80.            <div>
    81.                <iframe id="uploadFrame" frameborder="0" scrolling="no" src="Upload.aspx"></iframe>
    82.                <mb:ProgressControl ID="progress" runat="server" CssClass="lightblue" style="display:none" Value="0" Mode="Manual" Speed=".4" Width="100%" />
    83.                <div>
    84.                    <div id="status" class="info">请选择要上传的文件</div>
    85.                    <div class="commands">
    86.                        <input id="upload" type="button" value="上传" />
    87.                    </div>
    88.                </div>
    89.            </div>
    90.        </div>
    91.      
    92.    </div>
    93.    </form>
    复制代码












    upload.aspx:
    1. if (this.IsPostBack)
    2. {
    3.     UploadInfo uploadInfo = this.Session["UploadInfo"] as UploadInfo;
    4.     if (uploadInfo == null)
    5.     {
    6.         // 让父页面知道无法处理上传
    7.         const string js = "window.parent.onComplete("error", "无法上传文件。请刷新页面,然后再试一次);";
    8.         ScriptManager.RegisterStartupScript(this, typeof(upload_aspx), "progress", js, true);
    9.     }
    10.     else
    11.     {
    12.         //  让服务端知道我们还没有准备好..
    13.         uploadInfo.IsReady = false;
    14.         //  上传验证
    15.         if (this.fileUpload.PostedFile != null && this.fileUpload.PostedFile.ContentLength > 0
    16.             && this.fileUpload.PostedFile.ContentLength < 1048576)//  限制1M
    17.         {
    18.             //  设置路径
    19.             string path = this.Server.MapPath(@"Uploads");
    20.             string fileName = Path.GetFileName(this.fileUpload.PostedFile.FileName);
    21.             // 上传信息
    22.             uploadInfo.ContentLength = this.fileUpload.PostedFile.ContentLength;
    23.             uploadInfo.FileName = fileName;
    24.             uploadInfo.UploadedLength = 0;
    25.            //文件存在 初始化...
    26.             uploadInfo.IsReady = true;
    27.            //缓存
    28.             int bufferSize = 1;
    29.             byte[] buffer = new byte[bufferSize];
    30.             // 保存字节
    31.             using (FileStream fs = new FileStream(Path.Combine(path, fileName), FileMode.Create))
    32.             {                        
    33.                 while (uploadInfo.UploadedLength < uploadInfo.ContentLength)
    34.                 {
    35.                    //从输入流放进缓冲区
    36.                     int bytes = this.fileUpload.PostedFile.InputStream.Read(buffer, 0, bufferSize);
    37.                     // 字节写入文件流
    38.                     fs.Write(buffer, 0, bytes);
    39.                     //  更新大小
    40.                     uploadInfo.UploadedLength += bytes;
    41.                     //  线程睡眠 上传就更慢 这样就可以看到进度条了
    42.                     System.Threading.Thread.Sleep(100);
    43.                 }
    44.             }
    45.             // 删除.
    46.             File.Delete(Path.Combine(path, fileName));
    47.             //   让父页面知道已经处理上传完毕
    48.             const string js = "window.parent.onComplete("success", "{0} 已成功上传");";
    49.             ScriptManager.RegisterStartupScript(this, typeof(upload_aspx), "progress", string.Format(js, fileName), true);
    50.         }
    51.         else
    52.         {
    53.             if (this.fileUpload.PostedFile.ContentLength >= 1048576)//1M
    54.             {
    55.                 const string js = "window.parent.onComplete("error", "超出上传文件限制大小,请重新选择");";
    56.                 ScriptManager.RegisterStartupScript(this, typeof(upload_aspx), "progress", js, true);
    57.             }
    58.             else
    59.             {
    60.                 const string js = "window.parent.onComplete("error", "上传文件出错");";
    61.                 ScriptManager.RegisterStartupScript(this, typeof(upload_aspx), "progress", js, true);
    62.             }
    63.         }                  
    64.         uploadInfo.IsReady = false;
    65.     }
    66. }  
    复制代码


    代码就不贴完了 直接打包下载吧!
    有关上传的都归类在这里了:http://www.cnblogs.com/zengxiangzhan/category/269831.html

    目前 流行:


       百度


    http://fex.baidu.com/webuploader/  


      


    微信ui


    https://github.com/Tencent/weui.js


    https://github.com/Tencent/weui.js/tree/master/src/uploader


      



       layui


      http://www.layui.com/doc/modules/upload.html



    回复

    使用道具 举报

    您需要登录后才可以回帖 登录 | 立即注册

    本版积分规则

    QQ|手机版|Java学习者论坛 ( 声明:本站资料整理自互联网,用于Java学习者交流学习使用,对资料版权不负任何法律责任,若有侵权请及时联系客服屏蔽删除 )

    GMT+8, 2024-3-29 20:54 , Processed in 0.378923 second(s), 47 queries .

    Powered by Discuz! X3.4

    © 2001-2017 Comsenz Inc.

    快速回复 返回顶部 返回列表