3

我正在使用 nervgh 的 angular-file-upload，https://github.com/nervgh/angular-file-upload/wiki/Module-API。

在进行多文件上传时，有没有办法使用 angular-file-upload 并允许每个文件的附加属性？

我使用他们的图像样本开始： http: //nervgh.github.io/pages/angular-file-upload/examples/image-preview/

尝试为用户可以设置的每个文件添加一个布尔值，然后当它被拾取时我在服务器端使用它。

4

2 回答 2

2

您可以使用属性部分中formData显示的属性将您需要的任何内容发送到服务器。

  • formData {Array}：与文件一起发送的数据。

如果您在服务器端使用 PHP，我认为这篇文章可以帮助您。

于 2015-07-15T13:57:43.710 回答
0

这个问题相当古老，但由于文档并没有真正帮助我，我想在这里记下我的解决方案：

这就是我的 html 的样子（寻找“选项”）：

<div ng-controller="UploadCtrl2" nv-file-drop="" uploader="uploader" filters="customFilter">
    <div class="progress progress-xs margin-top-5 margin-bottom-20">
        <div class="progress-bar" role="progressbar" ng-style="{ 'width': uploader.progress + '%' }"></div>
    </div>
    <div class="row">
        <div class="col-md-6">
            <div ng-show="uploader.isHTML5">
                <div class="well my-drop-zone" nv-file-drop=""  options="{formData:[{folder:'attachments'}, {recordid:0}]}" uploader="uploader">
                    Dateien hierher ziehen.
                </div>
            </div>
        </div>
        <div class="col-md-6">
            <span class="btn btn-primary btn-o btn-file margin-bottom-15"> Dateien auswählen
                    <input type="file" nv-file-select="" options="{formData:[{folder:'attachments'}, {recordid:0}]}" uploader="uploader" multiple  />
                </span>
        </div>
    </div>
</div>

这是我的控制器（查找“fileItemOptions”）：

app.controller('UploadCtrl2', ['$rootScope', '$scope', 'FileUploader', 'Store',
function ($rootScope, $scope, FileUploader, Store) {
    var fileItemOptions = {};
    var uploader = $scope.uploader = new FileUploader({
        url: $rootScope.app.api.url + '/?c=uploads&a=set&authToken=' + encodeURIComponent(Store.get('X-Xsrf-Token')),
    });
    // FILTERS
    uploader.filters.push({
        name: 'customFilter',
        fn: function (item/*{File|FileLikeObject}*/, options) {
            if(options) fileItemOptions = options;
            return this.queue.length < 10;
        }
    });
    uploader.removeAfterUpload = true;
    // CALLBACKS
    uploader.onAfterAddingFile = function (fileItem, options) {
        //console.info('onAfterAddingFile', fileItem);
        if(fileItemOptions.formData) {
            fileItem.formData = fileItemOptions.formData;
        }
    };
    uploader.onAfterAddingAll = function (addedFileItems) {
        setTimeout(function () {
            console.log(uploader);
            uploader.uploadAll();
        }, 500);
    };
    uploader.onCompleteAll = function () {
        $scope.$parent.run.uploadComplete();
        fileItemOptions = {}; // cleanup
    };
}]);

每当添加文件时，自定义过滤器都会将选项对象存储在全局变量中。回调“onAfterAddingFile”将读取该变量并将其读取到 fileItem 对象。相当hacky，但这是我让它运行的唯一方法。

于 2016-12-18T00:25:53.240 回答