为什么data-ng-file-select不起作用？

斯蒂芬·福克（Stefan Falk）

我正在尝试上传文件。我有一个工作的例子，它是这样的：

<div class="btn btn-default btn-fileinput">
    <span class="glyphicon glyphicon-upload"></span> <input
        type="file" id="fileUploadInput" name="files" multiple
        accept="text/xml" data-ng-file-select="uploadFiles($files)" style="width: 40px;">
</div>

我对其进行了一些修改，并提出了以下建议：

<label class="btn btn-default btn-file">
    Upload 
    <input 
        type="file" 
        style="display: none;"
        name="files"        
        multiple                        
        data-ng-file-select="uploadModel($files)"
        >
</label>

<span data-ng-file-select="uploadModel($files)" class="btn btn-primary btn-lg" role="button">Test</span>

但是，uploadModel()未调用该函数：

$scope.uploadModel = function($files) {
    alert('Uploading ' + $files);
}

我如何使这项工作能够上传文件？

依存关系：

    <!-- Dependencies -->
    <script src="bower_components/jquery/dist/jquery.min.js"></script>

    <script src="bower_components/angular/angular.min.js"></script>
    <script src="bower_components/angular-file-upload/dist/angular-file-upload.min.js"></script>
    <script src="bower_components/angular-bootstrap/ui-bootstrap-tpls.min.js"></script>

应用模块：

var emaApp = angular.module('emaApp', ['ui.bootstrap', 'angularFileUpload']);

亚历山大·斯塔索塞尔斯基

如果是以下模块，则应该使用nv-file-select而不是data-ng-file-select与上载器对象结合使用。nv-file-select似乎不采取任何功能/回调，而是使用各种钩子（例如，onAfterAddingFile附加到上载器对象的钩子），使您可以在选择/上传过程中的不同点执行操作。看看他们的API文档，似乎没有任何data-ng-file-select指令，除非您创建了一个自定义指令。

否则，您可以创建一个自定义指令来监视对文件输入类型字段的更改，如下所示。

的HTML

<label class="btn btn-default btn-file">
    Upload 
    <input 
        type="file" 
        style="display: none;"
        name="files"        
        multiple                        
        nv-file-select 
        uploader="uploader" />
</label>

app.controller('someController', function($scope, FileUploader) {
    var uploader = $scope.uploader = new FileUploader({
        url: 'some/end/point'
    });

    uploader.onAfterAddingFile = function($files) {
        console.info('onAfterAddingFile', $files);
    };
});

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。