堆栈内存溢出
  繁体   English   中英

如何在页面上正确使用 angular-file-upload

[英]how to properly use angular-file-upload on a page

 原文  2015-05-22 17:37:44  8   2    javascript/ angularjs/ angular-file-upload

问题描述

我需要使用 angular-file-upload 指令（ https://github.com/nervgh/angular-file-upload ）。

我从 github 中按原样获取了 html 和控制器示例：

html：

<body ng-controller="GeekController" nv-file-drop="" uploader="uploader" filters="queueLimit, customFilter">
<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 class="active"><a href="#">Simple 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. nv-file-over uploader="link" over-class="className" -->
                <div class="well my-drop-zone" nv-file-over="" uploader="uploader">
                    Base drop zone
                </div>
                <!-- Example: nv-file-drop="" uploader="{Object}" options="{Object}" filters="{String}" -->
                <div nv-file-drop="" uploader="uploader" options="{ url: '/foo' }">
                    <div nv-file-over="" uploader="uploader" over-class="another-file-over-class" class="well my-drop-zone">
                        Another drop zone with its own settings
                    </div>
                </div>
            </div>
            <!-- Example: nv-file-select="" uploader="{Object}" options="{Object}" filters="{String}" -->

            Single
            <input type="file" nv-file-select="" uploader="uploader" />
        </div>
        <div class="col-md-9" style="margin-bottom: 40px">
            <h3>Upload 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></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>
                <div>
                    Queue progress:
                    <div class="progress" style="">
                        <div class="progress-bar" role="progressbar" ng-style="{ 'width': uploader.progress + '%' }"></div>
                    </div>
                </div>
                <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>

控制器：

angular.module('GeekCtrl', ['angularFileUpload'])
    .controller('GeekController', ['$scope', 'FileUploader', function($scope, FileUploader) {
        var uploader = $scope.uploader = new FileUploader({
            url: 'upload.php'
        });
// FILTERS
        uploader.filters.push({
            name: 'customFilter',
            fn: function(item /*{File|FileLikeObject}*/, options) {
                return this.queue.length < 10;
            }
        });
// 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);
    }]);

当我运行它时，我收到以下错误：

"Error: "Uploader" must be an instance of FileUploader
.link@http://localhost:8080/libs/angular/AngularFileUpload.js:1231:25
$@http://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js:70:197
B@http://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js:59:255
g@http://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js:51:335
B@http://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js:59:196
g@http://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js:51:335
g@http://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js:51:335
g@http://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js:51:335
g@http://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js:51:335
D/<@http://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js:50:441
ngViewFillContentFactory/<.link@http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular-route.js:983:7
$@http://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js:70:197
B@http://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js:59:255
g@http://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js:51:335
D/<@http://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js:50:441
P/<@http://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js:52:379
k@http://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js:56:315
update@http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular-route.js:933:17
Pe/this.$get</n.prototype.$broadcast@http://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js:128:355
commitRoute/<@http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular-route.js:616:15
f/<@http://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js:112:98
Pe/this.$get</n.prototype.$eval@http://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js:126:4
Pe/this.$get</n.prototype.$digest@http://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js:123:98
Pe/this.$get</n.prototype.$apply@http://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js:126:291
l@http://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js:81:227
M@http://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js:85:342
wf/</F.onload@http://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js:86:367
" "<div class="well my-drop-zone" nv-file-over="" uploader="uploader">"

我需要更改什么才能使其正常工作？

2 个解决方案

解决方案1
 0  2016-04-18 07:36:00

在 html 中使用 {{uploader}} 来访问控制器的上传器，或者在控制器中执行 $scope.uploader= new FileUlader(...)

解决方案2
 0  2016-07-14 00:13:20

这类似于“Uploader”必须是 FileUploader 的一个实例

您可以在 div 中使用指令 ng-if

<div class="well my-drop-zone" ng-if="uploader" nv-file-over="" uploader="uploader">

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 如何在angular-file-upload中限制文件上传 如何在使用angular-file-upload上传之前固定EXIF方向 如何使用nervgh的Angular-File-Upload发送formData 使用angular-file-upload保存文件 angular-file-upload没有将文件添加到请求 使用angular-file-upload发送表单数据 AngularJS RequireJS加载angular-file-upload 结合角度文件上传和multer angular-file-upload更新范围onCompleteItem 使用nervgh / angular-file-upload上传角度文件
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM