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

admin

文件上传 带进度条 多种风格 非常漂亮！







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








部分代码：

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;
15.         //  上传验证
16.         if (this.fileUpload.PostedFile != null && this.fileUpload.PostedFile.ContentLength > 0
18.             && this.fileUpload.PostedFile.ContentLength < 1048576)//  限制1M
19.         {
20.             //  设置路径
21.             string path = this.Server.MapPath(@"Uploads");
22.             string fileName = Path.GetFileName(this.fileUpload.PostedFile.FileName);
24.             // 上传信息
25.             uploadInfo.ContentLength = this.fileUpload.PostedFile.ContentLength;
26.             uploadInfo.FileName = fileName;
27.             uploadInfo.UploadedLength = 0;
29.            //文件存在 初始化...
30.             uploadInfo.IsReady = true;
32.            //缓存
33.             int bufferSize = 1;
34.             byte[] buffer = new byte[bufferSize];
36.             // 保存字节
37.             using (FileStream fs = new FileStream(Path.Combine(path, fileName), FileMode.Create))
38.             {                        
39.                 while (uploadInfo.UploadedLength < uploadInfo.ContentLength)
40.                 {
41.                    //从输入流放进缓冲区
42.                     int bytes = this.fileUpload.PostedFile.InputStream.Read(buffer, 0, bufferSize);
43.                     // 字节写入文件流
44.                     fs.Write(buffer, 0, bytes);
45.                     //  更新大小
46.                     uploadInfo.UploadedLength += bytes;
48.                     //  线程睡眠 上传就更慢 这样就可以看到进度条了
49.                     System.Threading.Thread.Sleep(100);
50.                 }
51.             }
53.             // 删除.
54.             File.Delete(Path.Combine(path, fileName));
56.             //   让父页面知道已经处理上传完毕
57.             const string js = "window.parent.onComplete("success", "{0} 已成功上传");";
58.             ScriptManager.RegisterStartupScript(this, typeof(upload_aspx), "progress", string.Format(js, fileName), true);
59.         }
60.         else
61.         {
62.             if (this.fileUpload.PostedFile.ContentLength >= 1048576)//1M
63.             {
64.                 const string js = "window.parent.onComplete("error", "超出上传文件限制大小，请重新选择");";
65.                 ScriptManager.RegisterStartupScript(this, typeof(upload_aspx), "progress", js, true);
66.             }
67.             else
68.             {
69.                 const string js = "window.parent.onComplete("error", "上传文件出错");";
70.                 ScriptManager.RegisterStartupScript(this, typeof(upload_aspx), "progress", js, true);
71.             }
72.         }                  
73.         uploadInfo.IsReady = false;
74.     }
75. }  

复制代码

代码就不贴完了 直接打包下载吧！
有关上传的都归类在这里了：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