个人中心
gpt4 book ai didi

javascript - Nervgh Angular 文件上传 - 如何限制要上传的图像数量？

转载 作者：行者123 更新时间：2023-12-02 05:37:00 25 4
gpt4 key购买 nike

我刚刚测试了这个用于文件上传的 Angular 模块“Nervgh Angular File Upload”，到目前为止，我能够按照说明中给出的示例运行它，这非常棒。这允许多次上传。虽然我通读了我可以使用的属性和方法，但我仍然不知道如何限制允许的上传数量。例如，在我的表单中，我不想让用户上传超过 3 张照片。我该怎么做？

ATM，我根据上面链接中给出的示例使用以下代码:

    <!DOCTYPE html>
<html id="ng-app" ng-app="app"> <!-- id="ng-app" IE<8 -->

    <head>
        <title>Uploads only images (with canvas preview)</title>
        <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" />

        <!-- Fix for old browsers -->
        <script src="../bower_components/es5-shim/es5-shim.js"></script>
        <script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>

        <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>

        <!--<script src="../bower_components/angular/angular.js"></script>-->
        <script src="http://code.angularjs.org/1.1.5/angular.min.js"></script>
        <script src="../../angular-file-upload.js"></script>
        <script src="controllers.js"></script>
        <script src="directives.js"></script>

        <style>
            .my-drop-zone { border: dotted 3px lightgray; }
            .ng-file-over { border: dotted 3px red; } /* Default class applied to drop zones on over */
            .another-file-over-class { border: dotted 3px green; }

            html, body { height: 100%; }

            canvas {
                background-color: #f3f3f3;
                -webkit-box-shadow: 3px 3px 3px 0 #e3e3e3;
                -moz-box-shadow: 3px 3px 3px 0 #e3e3e3;
                box-shadow: 3px 3px 3px 0 #e3e3e3;
                border: 1px solid #c3c3c3;
                height: 100px;
                margin: 6px 0 0 6px;
            }
        </style>

    </head>

    <!-- 1. ng-file-drop | ng-file-drop="options" -->
    <body ng-controller="TestController" ng-file-drop>

        <div class="container">

            <div class="navbar navbar-default">
                <div class="navbar-header">
                    <a class="navbar-brand" href="https://github.com/nervgh/angular-file-upload">Angular File Upload</a>
                </div>
                <div class="navbar-collapse collapse">
                    <ul class="nav navbar-nav">
                        <li class="active dropdown">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown">Demos <b class="caret"></b></a>
                            <ul class="dropdown-menu">
                                <li><a href="../simple">Simple example</a></li>
                                <li class="active"><a href="#">Uploads only images (with canvas preview)</a></li>
                                <li><a href="../without-bootstrap">Without bootstrap example</a></li>
                            </ul>
                        </li>
                        <li><a href="https://github.com/nervgh/angular-file-upload">View on Github</a></li>
                        <li><a href="https://raw.github.com/nervgh/angular-file-upload/master/angular-file-upload.min.js">Download</a></li>
                    </ul>
                </div>
            </div>

            <div class="row">

                <div class="col-md-3">

                    <h3>Select files</h3>

                    <div ng-show="uploader.isHTML5">
                        <!-- 3. ng-file-over | ng-file-over="className" -->
                        <div class="well my-drop-zone" ng-file-over>
                            Base drop zone
                        </div>

                        <!-- Example: ng-file-drop | ng-file-drop="options" -->
                        <div class="well my-drop-zone" ng-file-drop="{ url: '/foo' }" ng-file-over="another-file-over-class">
                            Another drop zone with its own settings
                        </div>
                    </div>

                    <!-- 2. ng-file-select | ng-file-select="options" -->
                    <input ng-file-select type="file" multiple  />

                </div>

                <div class="col-md-9" style="margin-bottom: 40px">
                    <h2>Uploads only images (with canvas preview)</h2>
                    <h3>The queue</h3>
                    <p>Queue length: {{ uploader.queue.length }}</p>

                    <table class="table">
                        <thead>
                            <tr>
                                <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>
                                    <strong>{{ item.file.name }}</strong>
                                    <!-- Image preview -->
                                    <!--auto height-->
                                    <!--<div ng-thumb="{ file: item.file, width: 100 }"></div>-->
                                    <!--auto width-->
                                    <div ng-show="uploader.isHTML5" ng-thumb="{ file: item.file, height: 100 }"></div>
                                    <!--fixed width and height -->
                                    <!--<div ng-thumb="{ file: item.file, width: 100, height: 100 }"></div>-->
                                </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-warning btn-xs" ng-click="item.cancel()" ng-disabled="!item.isUploading">
                                        <span class="glyphicon glyphicon-ban-circle"></span> Cancel
                                    </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>
                        <p>
                            Queue progress:
                            <div class="progress" style="">
                                <div class="progress-bar" role="progressbar" ng-style="{ 'width': uploader.progress + '%' }"></div>
                            </div>
                        </p>
                        <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 type="button" class="btn btn-warning btn-s" ng-click="uploader.cancelAll()" ng-disabled="!uploader.isUploading">
                            <span class="glyphicon glyphicon-ban-circle"></span> Cancel all
                        </button>
                        <button 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>
                    </div>

                </div>

            </div>

        </div>

    </body>
</html>

有谁知道如何限制此表单中允许的最大文件上传数量？

最佳答案

使用 Angular 文件上传 v1.0.2

有预定义的过滤器 https://github.com/nervgh/angular-file-upload/wiki/Module-API#predefined-filters

预定义过滤器

  • 文件夹
  • 队列限制

设置限制:

var uploader = new FileUploader({
    queueLimit: 1
});

然后在 View 中。

<element nv-file-drop filters="queueLimit"></element>

如果您已将 queueLimit 设置为 1 但不想应用它。将过滤器属性设置为空字符串。如果未设置过滤器属性，则应用所有过滤器。

<element nv-file-drop filters=""></element>

我发现多个过滤器不能像文档建议的那样用空格分隔。否则只有第一个过滤器适用。

<element nv-file-drop filters="filterName1,filterName2"></element>

关于javascript - Nervgh Angular 文件上传 - 如何限制要上传的图像数量？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/22423181/

25 4 0
文章推荐： REGEX:如何获得最接近匹配的单词？
文章推荐： angularjs $interval被多次调用
文章推荐： ruby - 使用 Ruby Sinatra 显示 .txt 文件
文章推荐： f# - 处理没有可变性的元组流？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com