Angular.js: input [type = file]バインディングをサポート

input type = fileへのangularによって提供されるデフォルトのバインディングはありません。

しかし、ファイル入力は実際のものです-javascriptに対してのみ、そのようなバインディングが役立つ唯一の利点は、ファイル入力をクリアすることです。 （Angularは現在、ファイルのajaxアップロードに対するフレームワークサポートも提供していないと思います）

@coli ：それは完全な真実ではありません。

input [file]でonchangeイベントをキャッチできることは理にかなっています。

https://github.com/lgersman/jquery.orangevolt-ampereには、まさにそのシナリオがあります。XMLHTTPRequestV2を介したファイルのアップロードです。
そのため、input [file]変更イベントをキャッチして、ページをリロードせずにファイルのアップロードを実行する独自のディレクティブを実装しました。

私はangularjsでその機能を見たいです！

タイプファイルの入力へのバインドに関して何か進歩はありましたか？ 私は解決策を探していましたが、うまくいくものを見つけることができないようです...

私の解決策は、リクエストやhttp.postではなくAjaxだけでした

私のiPadから送信されました

19:16に2013年3月1日、で、 "jgoldber" < [email protected] [email protected] >書きました：

タイプファイルの入力へのバインドに関して何か進歩はありましたか？ 私は解決策を探していましたが、解決策が見つからないようです。

—
このメールに直接返信するか、Gi tHubhttps：//github.com/angular/angular.js/issues/1375#issuecomment-14321221で表示してください。

私が見つけた最良の解決策： http ：

ええ、これは本当に見る必要があります。 ファイルを選択してアップロードできることは、ほとんどのWebアプリケーションにとって非常に重要であるため、この入力をサポートすることは、明らかに欠けている機能です。

バンプ。 これをマイルストーンに追加する必要があります。

これを支持する別の叫び声。

ng-modelファイルはHTML5ファイルAPIからのファイルに値を設定できます。IE8/ IE9用のFlashおよびSilverlightポリフィルがあります。

ええ、値をファイルまたは入力要素（ファイルへの参照を含む）に設定します

このソリューションは、実装されているファイルリーダーによって異なります。

...
.directive('file', function() {
    return {
        restrict: 'E',
        template: '<input type="file" />',
        replace: true,
        require: 'ngModel',
        link: function(scope, element, attr, ctrl) {
            var listener = function() {
                scope.$apply(function() {
                    attr.multiple ? ctrl.$setViewValue(element[0].files) : ctrl.$setViewValue(element[0].files[0]);
                });
            }
            element.bind('change', listener);
        }
    }
});

<file name="image" ng-model="inputFile" accept="image/png,image/jpg,image/jpeg" />

次に、xhrの処理を自分で行う必要がありますが、これはGUIバインディングおよびより多くの処理ロジックの範囲外であると思います。

そしてあなたが想像力を欠いているなら：

var file = $scope.inputFile;
$http.put('http://localhost:5984/demo/d06917e8d1fae1ae162ea7773c003f0b/' + file.name + '?rev=4-c10029f35a5c5ed9bd8cc31bf8589d3c', file, { headers: { 'Content-Type' : file.type } });

これはxhr2（http://www.html5rocks.com/en/tutorials/file/xhr2）のために機能します。長い例のアップロードURL、そのcouchdbドキュメントエンドポイント（添付ファイル）を許してください。

このフラッシュベースのFileReaderポリフィルhttps://github.com/Jahdrien/FileReaderとFileReaderhttps ： //github.com/francois2metz/に依存するこの純粋なjsFormDataポリフィルを組み合わせることで、IE8 / 9でこれを機能させることができ元気が良くポリフィルです

私の解決策はかなり大ざっぱで、少なくともコントローラーのプロトタイプがいじられている上記のjsfiddleと同じくらい大ざっぱでした...

コントローラ内：

    $scope.updateImage = '(' + function () {
      alert('moo');
    }.toString() + ')();';

希望するonchangeコールバックを文字列化し、クロージャでラップします。

   <input type="file" name="image" onchange="{{updateImage}}" ng-model="image">

Angularを使用してDOMに挿入します

正確にはきれいではありませんが、Webkitで動作します。 クロスブラウザテストは行いませんでした。

私は1.0.5を使用していますが、まだ壊れています。 Jgoldberの例を使用して、少し調整しました。
http://jsfiddle.net/ADukg/2589/

この例は1つのコントローラーでのみ機能するため、複数のコントローラーがあり、それぞれにファイル入力がある場合は、いくつかの変更を加える必要があります。

IEでまだテストしていませんが、私の推測では（IEを知っていると）動作しないと思います。

input要素を引数として取るスコープ内の関数を呼び出したいだけだとすると、これはディレクティブに実装するのが非常に簡単です。

http://jsfiddle.net/neilsarkar/vQzKJ/

（上記のjsfiddleから変更、@ programmistに感謝）

'use strict';

function filesModelDirective(){
  return {
    controller: function($parse, $element, $attrs, $scope){
      var exp = $parse($attrs.filesModel);

      $element.on('change', function(){
        exp.assign($scope, this.files);
        $scope.$apply();
      });
    }
  };
}

構成：

angular.module(...).directive('filesModel', filesModelDirective)

利用方法：

<input type="file" files-model="someObject.files" multiple>

すぐに修正してください。

まだ問題があります..いくつかのバージョンでは動作しますが、とにかくサポートされていません

1.5.0以降、onchange回避策を使用している場合は、$ digestを呼び出す必要があります。

<input type="file" onchange="angular.element(this).scope().myController.uploadFile(this.files[0]); angular.element(this).scope().$digest();">

ng-changeと入力/ファイルのサポートを改善するための+1。 ユースケース：画像のアップローダーとして、最適な表示のためにアップロードする前にその画像を編集（サイズ変更とトリミング）できるようにしたいと思います。 実装：（入力/ファイルを使用して）画像を参照し、onchangeイベントでファイルをキャンバスに移動し、fabricjsで編集します。 私はできません;非オン変更の実装を考えることはできません。

cztomsik-1.0.7を使用していて、ソリューションを機能させることができません-scope（this）関数は正常に解決されますが、コントローラーが見つかりません。uploadFile関数がscope（this）のメンバーとしてリストされています。

いじりながら、私はテクニックにわずかな変更を加えましたが、それは私のために働いているようです（私はまだ私が持っていた理由がわかりません：

<input type = "file" name = "file" ng-model = "file" onchange = "invokeUploadFile（this）" />

var invokeUploadFile = function（that）{
angle.element（that）.scope（）。uploadFile（that）
angle.element（that）.scope（）。$ digest（）;
}

jsfiddle / plunkerを提供していただけますか？
THX

1. 
   
   1. 2013 V 18時17分、tb01923 [email protected] ：
   
   

ng-changeと入力/ファイルのサポートを改善するための+1。 ユースケース：画像のアップローダーとして、最適な表示のためにアップロードする前にその画像を編集（サイズ変更とトリミング）できるようにしたいと思います。 実装：（入力/ファイルを使用して）画像を参照し、onchangeイベントでファイルをキャンバスに移動し、fabricjsで編集します。 私はできません;非オン変更の実装を考えることはできません。

cztomsik-1.0.7を使用していて、ソリューションを機能させることができません-scope（this）関数は正常に解決されますが、コントローラーが見つかりません。uploadFile関数はscope（this）オブジェクトのメンバーとしてリストされますが、入手したコントローラーを取り外します

Uncaught ReferenceError：uploadFileが定義されていませんblah.js：15
$ scope.uploadFile blah.js：15
invokeScope blah.js：4
onchange

—
このメールに直接返信するか、GitHubで表示してください。

+1。 ユーザーがファイルを選択したときにHTML5ファイルのアップロードを開始するために必要です。 回避するのは簡単ですが、これでうまくいくと思います。

+1。 実装してください。実装しないことは完全に直感的ではありません。

+1

+1

さあ、1年以上経ちましたが、Angular 1.2.0 stilには入力ファイルのバインドがありません...機能が追加されない理由がわかりませんか？ 実装にはいくつかの良い解決策があります。 この問題について、角度のあるチームメンバーの回答をお願いします。

最良の解決策の1つを引用するだけです（これは一方向のデータバインディングですが、それでも何もないよりはましです。検証とモデルの更新はIE7でも機能します）：

意味

  /**
   * <strong i="8">@ngdoc</strong> inputType
   * <strong i="9">@name</strong> angular.module.ng.$compileProvider.directive.input.file
   *
   * <strong i="10">@description</strong>
   * HTML file input field.
   *
   * <strong i="11">@param</strong> {string} ngModel Assignable angular expression to data-bind to.
   * <strong i="12">@param</strong> {string} multiple Allows multiple files selection.
   * <strong i="13">@param</strong> {string=} name Property name of the form under which the 
                                control is published.
   *
   * <strong i="14">@example</strong>
      <doc:example>
        <doc:source>
         <script>
           function Ctrl($scope) {
           }
         </script>
         <form name="myForm" ng-controller="Ctrl">
           file: <input type="file" ng-model="file"> single file selection.<br/>
           files: <input type="file" ng-model="files" multiple> multi-file selection.<br/>
           <tt>file.name = {{file.name}}</tt><br/>
           <tt>files.length = {{files.length}}</tt><br/>
          </form>
        </doc:source>
        <doc:scenario>
          it('should change state', function() {
            expect(binding('file.name')).toBeUndefined();

            input('file').select('a file name');
            expect(binding('file.name')).toEqual('a file name');
          });
        </doc:scenario>
      </doc:example>
   */
  'file': fileInputType,

関数

function fileInputType(scope, element, attr, ctrl) {
  element.bind('change', function() {
    scope.$apply(function() {
      var files = element[0].files,
          isValid = true;

      if (msie < 10) {
        files = [element[0].value];
      }

      if (attr.accept) {
        var i, j, acceptType, fileType,
            types = map(attr.accept.split(','), function(t) { return trim(t).split('/'); });
        for (i = 0; i < files.length && isValid; ++i) {
          fileType = files[i].type.split('/');
          isValid = false;
          for (j = 0; j < types.length && !isValid; ++j) {
            acceptType = types[j];
            isValid = acceptType[0] === fileType[0] && (acceptType[1] === '*' || acceptType[1] === fileType[1]);
          }
        }
      }
      ctrl.$setValidity('file', isValid);

      var viewValue;
      if (isValid) viewValue = attr.multiple ? files : files[0];
      ctrl.$setViewValue(viewValue);
    });
  });
}

+1

+1

@ntrpこの変更をPRしてみませんか？

その変更は少し詳しく説明してテストする必要があります。現時点ではそうする時間がありません。

+1

+1

-1：trollface：

冗談+1

+1

+1

+1

+1

+1

input [type = file]は、すべてのターゲットブラウザで使用できるわけではないFile APIを明示的に使用しない限り、実際には双方向のバインディングではありません。 これをng-modelに追加することはあまり意味がありませんが、この機能のいくつかのバリエーションをサポートするプラグインはたくさんあります。 しばらくの間、これをプラグインに委任するだけでは大丈夫ではありませんか？

http://caniuse.com/fileapi

@caitpそうですが、ng-changeを介してchangeイベントにバインドできることは理にかなっていますが、これは機能しません。

動作しないもう1つのことは、フォームの検証です。 ファイルサポートは、古いブラウザに対する一方向のデータバインディングフォールバックを備えた新しいブラウザに実装する必要があると思います。 この解決策が実行可能でない場合、私の意見では、機能が実装されていない理由と、このサポートの欠如が引き起こす問題を解決する方法をwikiに明確に記載する必要があります。 入力ファイルのニーズを最初に使用したときに解決する前に、多くの時間を失ったことを覚えています。

重要なのは、ファイル名はモデルにバインドされておらず、モデルにバインドすることは実際には意味がありません。 Fileインターフェイスのすべてのプロパティは読み取り専用であり、FileListインターフェイスはファイルのコレクションにすぎません。 双方向バインディングの容量がないため、そもそもこれらにng-modelを使用する本当の理由はありません。 代わりにchangeイベントにバインドするのは簡単で、必要に応じて宣言的に使用できるように、その機能を追加するディレクティブを簡単に作成できます。

しかし、ng-modelの動作に従う能力がない場合、これをng-modelの一部にすることはどのように意味がありますか？

ファイルのカスタムインターフェイスを作成できない理由はありません。angularはある時点でこれを作成する可能性がありますが、私の意見ではng-modelでは実際には意味がありません。 他の開発者がこれについてどう思っているかわかりません。彼らは同意するかもしれませんし、そうでないかもしれません。 しかし、私の観点からは、input [type = file]がng-modelに適合しないため、別のディレクティブの方が理にかなっています。

• ファイル入力の値については、スクリプトコンテキストから書き込み可能ではありません
• ここでは、File API（いくつかのターゲットブラウザーではサポートされていません）なしで検証を実行する実際の方法はありません。ブラウザーは基本的にこれを実行します。 --- ngRequired検証を除く

input [type = file]に対して実際にできることは、値が変更されたときの$ setViewValue（これは実際には意味がありません）と、スクリプトの変更（または基本的には基本的に）によって引き起こされたモデル値の変更を無視するようにngModelを変更することだけです。 $ watchを完全に無効にするだけです）。 検証に関しては、私たちが本当にサポートできるのはng-requiredだけです。つまり、他に何ができるのでしょうか。

ngModelでもファイル入力をサポートできるようにしたいのですが、どのように機能するかわかりません。ngModelインターフェイスに適合しません。

私はこの声明に同意しますが、前に述べたように、開発者が必要な機能を実現するために何をする必要があるかを理解できるように、wikiまたは一般的にドキュメントでこれをさらに強調する必要があります。

@ntrp well docsパッチは大歓迎です。提出していただければ、喜んで確認させていただきます:)

Angular自体に特定のディレクティブを追加することは解決策になりますか？

私は前の声明に同意しますが、少なくとも少し奇妙に思えます
Angularのようなフレームワークには、達成するための明確でクリーンな方法がありません
これ...
これはおそらく、私がしようとしたときに直面しなければならなかった最も混乱したことでした
ファイルをアップロードする...

ああ、 @ caitp 、ウィキのプルリクエストが実際には積極的に評価されていないことを少し前に読んだので、貢献することを気にしませんでした。 すぐに空き時間があれば、喜んで貢献します:)ありがとう。

ngChangeディレクティブでngModelも存在する必要があることに気づきませんでした。これが、ここでngModelについて多くの議論が行われている理由だと思います（これが

しかし、ngChangeがngModelを必要とする正確な理由は何ですか？ 私の考えでは、input [type = file]フィールドのchangeイベントにバインドできることは、ファイルが選択された後でフォームを自動送信する場合など、まったく理にかなっています。 そのような場合、私はフィールドの値が何であるかを本当に気にしません。 私はそれが変わったことだけを気にします。 そのようなことを処理するために私が見つけた最良の方法は、 @ cztomsikによって言及された上記の回避策を介することです：

onchange="angular.element(this).scope().fileChangedHandler()"

そして、それは本当に最善の解決策のようには感じません。

ng-changeは、他のイベントハンドラディレクティブと同じように名前が付けられていますが、実際にはchangeイベントのハンドラではありません。 ngModelControllerに$viewChangeListenerを追加するだけで、 $setViewValueが呼び出されるたびにトリガーされます。

残念な名前だと思います

これは、このコメントで閉じられた＃1236の複製です： https ：

軽量でありながら機能的であり、framewokユーザーにuxスタイルを強制する必要がないようにこれを実装する方法についての提案がない限り、それを検討します。 しかし、現時点では、ファイルアップロードの問題は十分に複雑であるため、コアの外部にある可能性が高いseoarateモジュールとして解決する必要があると考えています。

+1

@IgorMinarはここを見てください。少し汚いですが、非常に興味深い実装例です： //github.com/danialfarid/angular-file-upload。 @danialfaridはこれで大きな進歩を遂げています。

それがすべての問題であるかどうかを確認してください。いくつかの問題がいくつかのコメントで開かれています。 ngUploadモジュールを提供する必要があります： smile:。 たぶん、html5実装を提供し、 https： //github.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-Polyfills#file-apiで使用例をhttp://docs.angularjs.org/guideに追加でき

どのように解決しようと考えていますか？

+1

+1

+1

+1

+1

+1

+1

+1

うわー、この段階では少し恥ずかしいです。

+1

これは、ターゲットブラウザは、すべてのサポートされていないとき、確かに、ファイル入力の2ウェイバインディングを持っていることは本当にことはできませんファイルのAPI （http://caniuse.com/fileapiを）---しかし、場合でも、彼らができる、 input[type=file]とにかく、

申し訳ありませんが、これは何よりもWebプラットフォームの問題/セキュリティ機能の問題です。 それが実行可能であれば、それは実行されます

@caitp私はあなたが言っていることを完全に理解していますが、「これは他の何よりもWebプラットフォームの問題/セキュリティ機能の

たとえば、このラッパーのような単純なものが始まりです。

Angular 2.0の方向性（Angularのみの非ECMAイディオムのトランスパイル）を考えると、「Webプラットフォーム」の制限は問題にならないはずです。

@everyone else：この場合、Emberは何をしますか？

編集：トランスパイルステートメントから「必須」を削除します。

_簡単な説明。_Angular2.0アプリの構築には、トランスパイルされた言語や非ECMAイディオムは必要ありません。 プレーンなES5コードを問題なく使用できます。 Angular 2.0ソースをビルドする場合は、traceurを使用してコンパイルする必要があります。 当然、traceurを使用して独自のアプリを構築し、Angular内で使用しているのと同じ機能を利用できますが、これは完全にオプションです。 アナウンスでその点について混乱があった場合は申し訳ありません。

@EisenbergEffect私の悪い。 私はそれを知っていたので、校正を改善する必要があります。 コーヒーはありません！

フレームワークは、Webプラットフォームの制限を実際に回避することはできません。 同様に、ブラウザに読み取り専用IDL属性への書き込みを強制することはできません（これにより、ファイルの双方向バインディングが実際に壊れます）。また、ブラウザにファイルシステムを公開するように強制することもできません。これにより、実際に実行できなくなります。それで面白いものは何でも

@caitp私はこの問題をしばらくフォローしています。 Angularが単純なファイル選択入力をサポートするのに十分なコミュニティの要望があるように思われます。 現在（私が間違っていない限り）、ファイルを受け入れ、Angularを使用してXHR経由でアップロードする簡単なアプリを構築することは、従うべき推奨パターンがありませんか？ これは、「双方向バインディングがここでは意味をなさないため、申し訳ありませんがそれを行うことができない」以外に、少なくとも注意を払う価値のある機能のように聞こえます。

おそらく、この会話の方向を「Angularはこれをどのようにサポートできるでしょうか？」に向け直すことができます。 代わりに、「それは私たちの現在のパターンに適合しません」。

ファイル入力へのバインドは間違いなく可能です。実際、AngularJSの以前のプロジェクトでそれを実行しました。

ファイル入力との双方向バインドができないという事実はセキュリティ機能であり、それは理にかなっています。 作成者はスクリプトを介してファイルパスを設定することはできませんが、一方向にバインドしないのはなぜですか？

確かにそれはパラダイムを破りますが、それがng-changeを取得し、ハッキングなしでファイルAPIを介してファイルにアクセスする機能を取得することを意味するかどうかを本当に気にしますか？ jQueryはファイル入力の変更イベントにバインドできますが、Angularの方法は非常に神聖なので、コントローラー内でバインドすることはできませんか？ それはアーキテクチャの技術的な制限ですか、それとも単なるイデオロギーの障壁ですか？

同意しました、私は双方向バインディングにはあまり関心がありませんでした。 フープを飛び越えずに、ドキュメントの残りの部分と一緒にファイルを投稿したかっただけです。

2014年5月20日には、7:53 AMで、ジャスティン・アルーダ< [email protected] [email protected] >書きました：

@c aitphttps：//github.com/caitp私はこの問題をしばらくフォローしています。 Angularが単純なファイル選択入力をサポートするのに十分なコミュニティの要望があるように思われます。 現在（私が間違っていない限り）、ファイルを受け入れ、Angularを使用してXHR経由でアップロードする簡単なアプリを構築することには、従うべき公式のパターンがありませんか？ 「ここでは双方向バインディングが意味をなさないため、申し訳ありませんがそれを行うことはできません」以外に、少なくとも注意を払う価値のある機能のようには聞こえませんか。

おそらく、この会話の方向を「Angularはこれをどのようにサポートできるでしょうか？」に向け直すことができます。 代わりに、「それは私たちの現在のパターンに適合しません」。

—
このメールに直接返信するか、Gi tHubhttps：//github.com/angular/angular.js/issues/1375#issuecomment-43636326で表示してください。

次に、特定のフォームコントロールに対してng-modelの動作が大きく異なる場合があります。次に、「値を「foobarblah.txt」に変更すると、フォームコントロールが間違ったファイルを送信するのはなぜですか」などのバグを報告する人がいます。一貫性のないAPI->悪い。

ngModelは、特定のパターンに適合することを意味し、アプリケーションの作成者がオフにするのが非常に難しいため、このようなものには完全に理想的ではありません。 ただし、angular.dartとv2.0.0プロトタイプにはこれに対する解決策があるため、将来的にはこれが改善されるでしょう。 しかし、ng-modelが現在行っていることをすべて無視する別のng-modelの動作を実際に追加することはできません。それは意味がありません。

ファイルを受け入れ、Angularを使用してXHR経由でアップロードします

@guruwardは、衝撃波ポリフィルなどの使用を強制せずに、1.xのすべてのターゲットブラウザでこれをサポートすることはできません。 これを可能にするサードパーティのモジュールがあり、代わりに使用できます。 angle-file-uploadは、shockwave polyfillとhtml5ネイティブバージョンを同時に出荷し、適切なバージョンを選択します。 したがって、これは悪い解決策ではありません。これを実行する場合は、強くお勧めします。

しかし、それが私たちがコアに入れることができるものかどうかはわかりません。衝撃波ポリフィルをコアに輸送することについて彼がどう思うかをイゴールに尋ねる必要があります。

私はそれが人々が決してやりたくないユースケースだと言っているのではありません、私はこれをやりたいと思っていることを理解できます、私はそれがngModelパターンに適合しないと言っているだけです、そしてすべてのターゲットブラウザをサポートするため、そのようにフレームワークが壊れます。

これにサードパーティのモジュールを使用することの害は何ですか？

このポリフィルはフラッシュを必要としません。

@jreadingはポリフィルではなく、以前はフラッシュアップローダーに同梱されていましたが、おそらくまだどこかにあります。

それが行っているのは、すべてのターゲットブラウザで利用できるわけではないFile APIに依存しているため、Angular1.xコアでは問題があります。

そのAPIがなければ、shockwaveのようなものなしでファイルblobに到達する方法はありません。

フラッシュの代わりにiframeを使用しているので、これを考えているかもしれません。 セマンティクスを議論する代わりに、ロードマップはどうですか？ ファイルAPI対応ブラウザのファイル入力のng-changeから始めましょう。

@jreading残念ながら、これは、まだサポートされているIE9を含むAPI対応ではないブラウザーには役立ちません。 IE9のサポートに依存している人のための回避策がなければ、サポートされているブラウザAで動作するがサポートされていないブラウザBで動作するAPIをコアで出荷することはできません。 いいえ、iframeはファイルの内容をblobとして公開せず、アップロード可能にしません。 Hnnggggg。

これに対する解決策はサードパーティのモジュールにあり、アプリケーションが適切であると感じた場合に使用できます。 これをコアに入れると、A）サードパーティのモジュールに苦労し、B）すべてのターゲットブラウザをサポートできないため、これは問題になります。

これは私の意見です。おそらくイゴールや他の誰かが同意しないでしょうが、ここではそれが正しいアプローチではないと思います。

サードパーティのモジュールが機能し、必要な場合、それらを使用することの害は何ですか？

ブロブがコントローラーで使用可能である必要があることを実際に暗示したことはありません。 私は手足に出かけますが、私が見る最大のユースケースは、ファイル入力がいつ変更されたかを知る機能と、それを残りのエンドポイントに送信する機能です。これは、このiframeソリューションまたはファイルAPIとAngularで利用できます。ハック。

サードパーティのモジュールが唯一の方法であり、私のブログ投稿のような積極的な拡張機能です（アップロードはありません!!）が、質問を振り返って、「最新のブラウザー用のより優れたAPIを使用することの害は何ですか？」と尋ねることができます。

「最新のブラウザ用のより優れたAPIを使用することの害は何ですか？」

この議論は機会費用を考慮していないため弱いです。 私たち（コアチーム）が取り組むべきことは他にもたくさんあります。

けっこうだ。 ちょうど大きなギャップと低いぶら下がっている果物のように感じます。

ここでの問題は、これをngModelで機能させる方法に関するものではありません。 ngModelはFileListを入力フィールドからスコープに公開できると思いますが、逆に、モデルをnull / undefinedに設定することだけをサポートすることを許可します。 パーサー/フォーマッターはおそらく何もせず、バリデーターはファイルの有無のチェックなどの単純なことを行うだけです。

問題は、（前述のように）ファイルAPIサポートがないと、ベースラインがIE9であり、このようなものをポリフィルすることはコアにとって問題外であることを考えると、コアに対してこれを適切に行うことは不可能であるということです。

さらに、クロスブラウザ互換ではない方法でこの入力を処理しようとすると、サードパーティのソリューションが難しくなり、コアソリューションと戦う/無効にする/回避する必要があります。

これを処理する非コアソリューションはすでに存在し、これらはこの問題の議論と前の問題で言及されました

私たちがやりたいと思う大きな影響を与えるものは他にもたくさんあります。 これは比較的一般的なケースであることを理解していますが、既存のソリューションでは不十分な理由をまだ聞いていません。

この議論に投入されたエネルギーの一部は、必要に応じて既存のソリューションを改善するために、または既存のソリューションよりも優れた新しいソリューションを作成するためにリダイレクトできますか？

＃1236を閉じたのと同じようにこれを閉じます。 Angular 2は、最新のブラウザーをサポートするように構築されており、そのファイルを使用すると、簡単にサポートを利用できるようになります。

要素に直接アクセスしてファイル情報を取得し、AJAJ経由でアップロードできるように、変更イベントがいつ発生するかを知りたいだけです。

@bjoshuanoahでは、何のためにngModelが必要ですか？ イベントリスナーを入力= pにバインドするだけです

@caitpディレクティブではなく、コントローラー内のすべてを制御したい。

ng-change = "uploadFile（{$ event：$ event}）"を置くと

コントローラに$ scope.uploadFile（event）を含めることができます。 そこで処理します。

私の具体的な使用例は次のとおりです。ファイルをs3にアップロードし、URLをモデルに適用します。

代わりに、同じことをするためにスコープに侵入する必要があります。 とてもうるさい：

<input name="highRes" scope="{{contentOptions.currentValue}}" key="value" type="file" onchange="angular.element(this).scope().setFile(this)">

私は誰かがこの問題を殺してくれることを望みます。 だから私たちは皆先に進むことができます:)

2014年7月25日には、午前9時22分AMで、ブライアン< [email protected] [email protected] >書きました：

要素に直接アクセスしてファイル情報を取得し、AJAJ経由でアップロードできるように、変更イベントがいつ発生するかを知りたいだけです。

—
このメールに直接返信するか、Gi tHubhttps：//github.com/angular/angular.js/issues/1375#issuecomment-50171714で表示してください。

+1

+1

+1000000000000000

+1

+1

+1

+1

+100500

+1
Ajaxが問題になる理由がわかりません。 ローカルマシンのcsvファイルからAngularモデルにデータをロードしたい場合があります。 ng-changeがAngular内のファイル入力で機能した場合、これは簡単ですが、現在はそうではありません。 このシナリオでは、AjaxやサーバーAPIはまったく必要ありません。 なぜこれが閉鎖されているのかもわかりませんか？

私の現在の回避策は、次のことを行うことです

 input(type="file", onchange="angular.element(this).scope().onFileSet(this.files)")

私のコントローラーには次のようなものがあります

$scope.onFileSet = function(files) { 
// work your magic here 
}

かなり悪臭を放ちますが、私はツールとしてAngularをろくでなしにしているような気がします。 より角度のある方法でこれを行う方法についての洞察は非常に高く評価されます。

：heart ：： heart：

これがヨットです:: sailboat：

@samcconeデバッグモードがオフになっている場合、scope（）は使用できませんか？

@geetsceその通りです（1.3.x以降）

ウェルプ、1.2の土地ではすべてが順調です。

@Narretzより良い解決策はありますか？

これは私にとってはうまくいきます、それはます

<input type="file" multiple="multiple" data-dbinf-on-files-selected="chooseAFunctionName(selectedFileList)">
<script>
/**Directive to propagate selected files from an HTML input element with type="file"
 * to the surrounding AngularJS controller.
 */
myApp.directive('dbinfOnFilesSelected', [function() {
    return {
        restrict: 'A',
        scope: {
              //attribute data-dbinf-on-files-selected (normalized to dbinfOnFilesSelected) identifies the action
              //to take when file(s) are selected. The '&' says to  execute the expression for attribute
              //data-dbinf-on-files-selected in the context of the parent scope. Note though that this '&'
              //concerns visibility of the properties and functions of the parent scope, it does not
              //fire the parent scope's $digest (dirty checking): use $scope.$apply() to update views
              //(calling scope.$apply() here in the directive had no visible effect for me).
            dbinfOnFilesSelected: '&'
        },
        link: function(scope, element, attr, ctrl) {
            element.bind("change", function()
            {  //match the selected files to the name 'selectedFileList', and
               //execute the code in the data-dbinf-on-files-selected attribute
             scope.dbinfOnFilesSelected({selectedFileList : element[0].files});
            });
        }
    }
}]);

myApp.controller('myController', ['$scope', function($scope) {
    $scope.chooseAFunctionName = function (filelist) {
        for (var i = 0; i < filelist.length; ++i) {
            var file = filelist.item(i);
            //do something with file; remember to call $scope.$apply() to trigger $digest (dirty checking)
            alert(file.name);
           }
    };
}]);
</script>

+1

+1

それは起こりません...それを手放す、それを手放す...

+1

@samcconeが言ったように、

input(type="file", onchange="angular.element(this).scope().onFileSet(this.files)")

これは物事を行うための角度のある方法ではありません。 それは奇妙です。

+1

+1

+1

ねえ@ caitp @ Narretzあなたたちが私が1.2xブランチのためにこれのためにPRを作ることができることを望むなら、これがあなたが追加したいものであるかどうか私に知らせてください。 実際のファイルオブジェクトにアクセスする限り、セキュリティ上の懸念とクロスブラウザサポートの欠如を理解していますが、ファイル入力が変更されたとき（元のイベントを渡す）を検出するための基本的なサポートは十分なフックを提供するようです人々が魔法を働かせるために。

いつもありがとうございます：palm_tree：

+1

+1

+1

+1

+1

ng-file-uploadは

@neokyolの+1 !! それはうまくいきます！

この共通機能は、デフォルトでフレームワークに含まれている必要があります

役に立った

+1

+1

+1

+1

+1

これは私のために働いた、助けになるかもしれない

angular.module('app', [])
  .controller('MainCtrl', MainCtrl)
  .directive('fileChange', fileChange);

  function MainCtrl($scope) {
    $scope.upload = function () {
      // do something with the file
      alert($scope.file.name);
    };
  }

  function fileChange() {
    return {
      restrict: 'A',
      require: 'ngModel',
      scope: {
        fileChange: '&'
      },
      link: function link(scope, element, attrs, ctrl) {
        element.on('change', onChange);

        scope.$on('destroy', function () {
          element.off('change', onChange);
        });

        function onChange() {
          ctrl.$setViewValue(element[0].files[0]);
          scope.fileChange();
        }
      }
    };
  }

<div ng-app="app" ng-controller="MainCtrl">
  <input type="file" file-change="upload()" ng-model="file">
</div>

http://plnkr.co/edit/JYX3Pcq18gH3ol5XSizw?p=preview

+1

+1

+1

+1

+1000000000000000000000000

+1

+1

@dciccaleプランカーの例を教えてください。

@ santhosh77h http://plnkr.co/edit/JYX3Pcq18gH3ol5XSizw?p=preview

+1

+1

+1このためにコアライブラリにディレクティブが組み込まれている必要があります。 そのかなりばかげている

+1

+1
この機能は次のリリースのいずれかに予定されていますか？

+1

+1

$ scopeがコントローラーに注入されないプロジェクトでこれを行う方法。 コントローラーを宣言するためにGULPとES6の方法を使用するlaravelangularを使用しています。

NS

class TestController{
    constructor(API){
        'ngInject';
        this.API = API
    }

    $onInit(){
        this.file = null;
    }
    upload() {
        console.log(this.file)
    }
    fileChanged(elm) {
        console.log('hey')
        this.file = elm.file;
        this.$apply();
    }
}

export const TestComponent = {
    templateUrl: './views/app/components/test/test.component.html',
    controller: TestController,
    controllerAs: 'vm',
    bindings: {}
}

私は自分が信じている回避策を見つけました。 http://stackoverflow.com/questions/38449126/how-to-set-up-ng-file-upload-in-laravel-angular-project/38486379#38486379

+1

@ntrp @guruward @coli @lgersman @jgoldber @Siyfion
の検証をどのように修正しましたか
私の検証：
this.catalougeForm = this.catalougeFormBuilder.group（{
catalougeIconName：[''、Validators.required]
}）;
HTML：
（change）= "changeListener（$ event）">

私のバリデーターは、アップロード後にcatalougeIconName値を空/ nullと見なしています。
画像は送信されていますが、バリデーターが機能していません

これに関する更新はありますか？

更新はありますか？

https://github.com/angular/angular.js/issues/1375#issuecomment-43820650を参照して