1. ホーム
  2. angularjs

[解決済み] data-ng-file-selectが動作しないのはなぜですか?

2022-02-04 23:25:51

質問

ファイルをアップロードしようとしています。次のような動作例を持っています。

<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>

JS

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

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