[解決済み] 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);
};
});
関連
-
[解決済み】Angular ui-routerで$stateメソッドを$stateChangeStart toStateとfromStateで使用する。
-
[解決済み] Angular ng-repeatの条件付きラップアイテム(ng-repeatのグループアイテム)。
-
[解決済み] ng-pattern` - 数字だけをチェックする方法は?
-
angularjsのルーティングについて $stateと$stateParamsの話
-
[解決済み] AngularJSの.$on()とは?
-
[解決済み] AngularJSでデータバインディングはどのように機能するのですか?
-
[解決済み] なぜAngularJSはselectに空のオプションを含めるのですか?
-
[解決済み] AngularJS で $http.get リクエストにデータを渡す
-
[解決済み] 子コントローラから親スコープにアクセスするAngularJS
-
[解決済み】AngularJSのng-optionsでselectを操作する。
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み】Angular ui-routerで$stateメソッドを$stateChangeStart toStateとfromStateで使用する。
-
[解決済み] Angular ng-repeat エラー "リピータ内の重複は許可されません。"
-
[解決済み] AngularJSのng-showとフェードアニメーション
-
[解決済み] Angular UI-Routerのマルチビュー
-
[解決済み] Angular ng-repeatの条件付きラップアイテム(ng-repeatのグループアイテム)。
-
[解決済み] md-selectでデフォルト値を設定する方法
-
[解決済み] AngularJSで画像を表示する
-
[解決済み] angularJSの::の意味するところ
-
[解決済み] angular.serviceとangular.factoryの比較
-
[解決済み】AngularJs:ファイル入力フィールドの変更をチェックする方法は?