使用相同的上传器角度上传多个文件

时间:2016-05-11 12:16:37

标签: javascript angularjs

所以我试图让这个上传者工作,这就是我现在所拥有的

这是我的HTML

<div class="row" ng-repeat="row in fileUploadRows">
                    <div ng-if="advanced_user" class="btn btn-info btn-sm" style="display:inline-block" ngf-select="uploadinv($file, $index)">Upload Attachment</div>
                    <p style="display:inline-block;" ng-if="row.fileName">Uploaded file: {{row.fileName}}
                        <button type="button" ng-click="deleteInvAttachment(event.filenameinv)" class="btn btn-danger btn-sm">
                            <i class="fa fa-trash-o"></i>
                        </button>
                        <button type="button" ng-click="addInvAttachment($index)" class="btn btn-info btn-sm">
                            <i class="fa fa-plus"></i>
                        </button>
                        <button type="button" ng-click="removeInvAttachment(row)" class="btn btn-danger btn-sm">
                            remove last attachment
                        </button>
                    </div>

这是在我的控制器中

$scope.fileUploadRows = [];
var fileDetails = {
  fileName: $scope.event.filenameinv
}

$scope.fileUploadRows.push(fileDetails);

$scope.counter = 1;

$scope.addInvAttachment = function(index) {
  var fileDetails = {
    fileName: ''
  }
  $scope.fileUploadRows.push(fileDetails);
  $scope.counter++;
}

$scope.removeInvAttachment = function(row) {
  $scope.fileUploadRows.splice(row, 1);
}

现在我所拥有的东西在某种程度上起作用,我可以点击加号按钮,它会在html端加载一个空白的上传按钮,以及{{fileUploadRows}}中的空白fileName现在我遇到的问题是当我尝试上传新文件时。它取代了旧文件(以及旧字符串等)

继承我的上传者

$scope.uploadinv = function (file, index) {
        if (file && $scope.advanced_user) {
            Upload.upload({
                url: '',
                data: {file: file}
            }).then(function (resp) {
                sweetAlert({title: "Attachment Saved", type: "success"});
            }, function (resp) {
                sweetAlert({title: "Attachment Not Saved", type: "error"});
            }, function (evt) {
                var progressPercentage = parseInt(100.0 * evt.loaded / evt.total);
                console.log('progress: ' + progressPercentage + '% ' + evt.config.data.file.name);
                $scope.event.filenameinv = evt.config.data.file.name
            });
        }
    };

那么我如何将每个文件保存到数组中呢?

由于

1 个答案:

答案 0 :(得分:0)

强烈建议您使用ng-file-upload:https://github.com/danialfarid/ng-file-upload

非常完整,支持拖放,图像大小调整等等。

好像你可能正在使用它(我注意到上传服务和ngf-select指令)

如果是,请查看ngf-change,并尝试使用ng-model绑定文件输入,以获取$ scope accessibility。