• .net版本angular-file-upload

            
    分享一个angular的上传控件，双向绑定。

    <html id="ng-app" ng-app="app">
    <head>
        <title>Simple example</title>
        <link href="../MasterPager/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
        <script src="../MasterPager/js/angular-file-upload/console-sham.js" type="text/javascript"></script>
        <script src="../MasterPager/js/angular-file-upload/angular.min.js" type="text/javascript"></script>
        <script src="../MasterPager/js/angular-file-upload/angular-file-upload.min.js" type="text/javascript"></script>
        <script src="../MasterPager/js/angular-file-upload/controllers.js" type="text/javascript"></script>
        <style>
            .my-drop-zone
            {
                border: dotted 3px lightgray;
            }
            .nv-file-over
            {
                border: dotted 3px red;
            }
            /* Default class applied to drop zones on over */.another-file-over-class
            {
                border: dotted 3px green;
            }
        </style>
    </head>
    <body ng-controller="AppController" nv-file-drop="" uploader="uploader" filters="queueLimit, customFilter">
        <div class="container">
            <div class="row">
                <div class="col-md-12" style="margin-bottom: 40px">
                    <br />
                    <br />
                    <input type="button" value="浏览" onclick="uplTheFile.click()" class="btn btn-primary btn-flat">
                    <input type="text" size="20" name="upfile" id="upfile" style="border: 0px dotted #ccc;
                        500px">
                    <input type="file" id="uplTheFile" nv-file-select="" uploader="uploader" multiple
                        style="display: none" onchange="upfile.value=this.value" />
                    <button type="button" class="btn btn-success btn-s" ng-click="uploader.uploadAll()"
                        ng-disabled="!uploader.getNotUploadedItems().length">
                        <span class="glyphicon glyphicon-upload"></span>Upload all
                    </button>
                    <button onclick="upfile.value=''" type="button" class="btn btn-danger btn-s" ng-click="uploader.clearQueue()"
                        ng-disabled="!uploader.queue.length">
                        <span class="glyphicon glyphicon-trash"></span>Remove all
                    </button>
                    <br />
                    <%--        <p>
                        Queue length: {{ uploader.queue.length }}</p>--%>
                    <table class="table" id="fileUp">
                        <thead>
                            <tr>
                                <th width="50%" style="display:none">
                                    disName
                                </th>
                                <th width="50%">
                                    Name
                                </th>
                                <th ng-show="uploader.isHTML5">
                                    Size
                                </th>
                                <th ng-show="uploader.isHTML5">
                                    Progress
                                </th>
                                <th>
                                    Status
                                </th>
                                <th>
                                    Actions
                                </th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr ng-repeat="item in uploader.queue">
                                <td style="display:none">
                                    <strong>{{ item.file.disName }}</strong>
                                </td>
                                <td>
                                    <strong>{{ item.file.name }}</strong>
                                </td>
                                <td ng-show="uploader.isHTML5" nowrap>
                                    {{ item.file.size/1024/1024|number:2 }} MB
                                </td>
                                <td ng-show="uploader.isHTML5">
                                    <div class="progress" style="margin-bottom: 0;">
                                        <div class="progress-bar" role="progressbar" ng-style="{ 'width': item.progress + '%' }">
                                        </div>
                                    </div>
                                </td>
                                <td class="text-center">
                                    <span ng-show="item.isSuccess"><i class="glyphicon glyphicon-ok"></i></span><span
                                        ng-show="item.isCancel"><i class="glyphicon glyphicon-ban-circle"></i></span>
                                    <span ng-show="item.isError"><i class="glyphicon glyphicon-remove"></i></span>
                                </td>
                                <td nowrap>
                                    <button type="button" class="btn btn-success btn-xs" ng-click="item.upload()" ng-disabled="item.isReady || item.isUploading || item.isSuccess">
                                        <span class="glyphicon glyphicon-upload"></span>Upload
                                    </button>
                                    <button type="button" class="btn btn-danger btn-xs" ng-click="item.remove()">
                                        <span class="glyphicon glyphicon-trash"></span>Remove
                                    </button>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                    <div>
                        <input type="hidden" id="posd" runat="server" clientidmode="Static" />
                        <input type="hidden" id="hidmoduleid" runat="server" clientidmode="Static" />
                        <%--  <div>
                            Queue progress:
                            <div class="progress" style="">
                                <div class="progress-bar" role="progressbar" ng-style="{ 'width': uploader.progress + '%' }">
                                </div>
                            </div>
                        </div>--%>
                        <div style="display:none">
                                 <input type="button" id="btnBc" runat="server"  onclick="search()" clientidmode="Static" />
                        </div>
                        <input   type="hidden" id="hdText" runat="server" clientidmode="Static" />
                    </div>
                </div>
            </div>
        </div>
    </body>
    </html>
    <script>
        function search() {
     
            var s3 = document.getElementById("fileUp"); //获取第一个表格
            var addHtml = "";
           
           
            for (var i = 0; i < s3.rows.length; i++) {
                for (var j = 0; j < s3.rows[i].cells.length; j++) {
                    
                    if (i>0) {
                        if (j < 3) {
                            addHtml += s3.rows[i].cells[j].innerText.replace("<strong class="ng-binding">", "").replace("</strong>", "") + ",";
                        }
                    }
                }
                if (i > 0) {
                    addHtml = addHtml.substring(0, addHtml.length - 1).replace(" ", "").replace(" ", "");
                    addHtml += "$";
                }
     
            }
            $('#hdText').val(addHtml);
            
        }
     

    </script>
    controllers.js

    'use strict';
     
     
    angular
     
     
        .module('app', ['angularFileUpload'])
     
     
        .controller('AppController', ['$scope', 'FileUploader', function ($scope, FileUploader) {
            var a = $("#posd").val();
            var module = $("#hidmoduleid").val();
        //    var s3 = document.getElementById("fileUp"); //获取第一个表格
     
            var uploader = $scope.uploader = new FileUploader({
     
                url: '../UserControl/UploadHandler.ashx?Module=' + a + '&moduleid=' + module + '&ActionType=select',
            //    formData: [{ component: FileUploader.disName}]
     
            });
     
            // FILTERS
            uploader.filters.push({
                name: 'extensionFilter',
                fn: function (item, options) {
                    var filename = item.name;
                    var s3 = document.getElementById("fileUp"); //获取第一个表格
                    var addHtml = "";
                    if (s3.rows.length == 1) {
                        return true;
                    } else {
                        for (var i = 0; i < s3.rows.length; i++) {
                            if (i > 0) {
                                for (var j = 0; j < s3.rows[i].cells.length; j++) {
                                    if (j == 1) {
                                        addHtml = s3.rows[i].cells[j].innerText.replace("<strong class="ng-binding">", "").replace("</strong>", "");
                                        if (filename == addHtml.replace(" ", "").replace(" ", "")) {
                                            alert('上传附件重复.');
                                            return false;
                                        } else {
                                            return true;
                                        }
                                    }
                                }
                            }
                        }
                    }
                }
            });
     
            uploader.filters.push({
                name: 'sizeFilter',
                fn: function (item, options) {
                    var fileSize = item.size;
                    fileSize = parseInt(fileSize) / (1024 * 1024);
                    if (fileSize <= 500)
                        return true;
                    else {
                        alert('请您选择小于500M的附件进行上传.');
                        return false;
                    }
                }
            });
     
            uploader.filters.push({
                name: 'itemResetFilter',
                fn: function (item, options) {
                    if (this.queue.length < 10)
                        return true;
                    else {
                        alert('最多支持您上传10个附件.');
                        return false;
                    }
                }
            });
     
            // CALLBACKS
     
            uploader.onWhenAddingFileFailed = function (item /*{File|FileLikeObject}*/, filter, options) {
                console.info('onWhenAddingFileFailed', item, filter, options);
            };
            uploader.onAfterAddingFile = function (fileItem) {
                console.info('onAfterAddingFile', fileItem);
            };
            uploader.onAfterAddingAll = function (addedFileItems) {
                console.info('onAfterAddingAll', addedFileItems);
            };
            uploader.onBeforeUploadItem = function (item) {
                console.info('onBeforeUploadItem', item);
            };
            uploader.onProgressItem = function (fileItem, progress) {
                console.info('onProgressItem', fileItem, progress);
            };
            uploader.onProgressAll = function (progress) {
                console.info('onProgressAll', progress);
            };
            uploader.onSuccessItem = function (fileItem, response, status, headers) {
                console.info('onSuccessItem', fileItem, response, status, headers);
            };
            uploader.onErrorItem = function (fileItem, response, status, headers) {
                console.info('onErrorItem', fileItem, response, status, headers);
            };
            uploader.onCancelItem = function (fileItem, response, status, headers) {
                console.info('onCancelItem', fileItem, response, status, headers);
            };
            uploader.onCompleteItem = function (fileItem, response, status, headers) {
                console.info('onCompleteItem', fileItem, response, status, headers);
            };
            uploader.onCompleteAll = function () {
                console.info('onCompleteAll');
            };
     
            console.info('uploader', uploader);
            uploader.onSuccessItem = function (fileItem, response, status, headers) {
                response = response.split('$');
                var addHtml = '';
                for (var i = 0; i < s3.rows.length; i++) {
                    if (i > 0) {
                        for (var j = 0; j < s3.rows[i].cells.length; j++) {
                            if (j == 1) {
                                addHtml = s3.rows[i].cells[j].innerText.replace("<strong class="ng-binding">", "").replace("</strong>", "");
                                if (response[1] == addHtml.replace(" ", "").replace(" ", "")) {
                                     //根据上传附件名称，将上传后生成的唯一ID重新赋值到页面上，点击保存按钮时，进行保存入库。 
                                    s3.rows[i].cells[0].innerText = response[0];
                                }
                            }
                        }
                    }
                }
            };
        } ]);

    一般处理程序

       public void ProcessRequest(HttpContext context)
            {
                if (context.Request.Files.Count > 0)
                {
                    HttpFileCollection files = context.Request.Files;
                    var userName = context.Request.Form["name"];
                    for (int i = 0; i < files.Count; i++)
                    {
                        HttpPostedFile file = files[i];
     
                        string fname = context.Server.MapPath("Uploads\" + userName.ToUpper() + "\" + file.FileName);
                        file.SaveAs(fname);
                    }
                }
                context.Response.ContentType = "text/plain";
                context.Response.Write("File/s uploaded successfully!");
            }

    C# 后台保存方法
         public void SaveFile() 
            {
                Page.ClientScript.RegisterStartupScript(this.GetType(), "", "<script>search();</script>");
          
                string fileText = this.hdText.Value;
                string[] fileArr = fileText.Split('$');
                foreach (var item in fileArr)
                {
                    if (!string.IsNullOrEmpty(item))
                    {
                        string[] filetext = item.Split(',');
                        if (filetext.Length==3)
                        {
                            if (filetext[0].Substring(0,2)=="20")
                            {
                                InsertAttachment(filetext[0], ModuleID, InfoID, filetext[1], "", DateTime.Now, ((PageBase)Page).CurrentUser.EmployeeID, 0, filetext[1], Path.GetExtension(filetext[1]),filetext[2].ToString().Replace("MB", "") );
                            }
                         }
                    }
                }
             } 

     
  • 相关阅读:
    javaScirpt学习之事件
    验证表单内容之后如何阻止表单提交
    利用js制作异步验证ajax方法（）
    Ajax制作无刷新评论系统
    ajax查询数据的举例
    以Ajax的方式访问数据库
    jquery中的全局事件
    jquery序列化元素
    jquery中的ajax
    jquery与ajax的应用
  • 原文地址：https://www.cnblogs.com/ljh1993/p/5846457.html
Copyright © 2020-2023  润新知