AngularJS 1.x：動的に作成された複数のファイルアップロードフィールド

Question

あなたは私を失礼する必要がありますが、私は角度を頻繁に使用しません。動的に生成された入力フィールドからファイルをアップロードできるソリューションを実装する必要があります。

キャッチは、私は（これは私が実装されAngularJSで使用していますフレームワークによるものである）任意のディレクティブを使用することができないということです。

フィールドを作成するための私の現在のコード：

$scope.addNewFile = function() { 
    var newFileNo = $scope.files.length + 1; 
    $scope.files.push({'id': 'file' + newFileNo}); 
}; 

$scope.removeFile = function() { 
    var lastFile = $scope.files.length - 1; 
    $scope.files.splice(lastFile); 
}; 

そして、ここが原因静的idとname値のファイル（正確ではないが、アップロードするためのコードです：

$scope.uploadFile = function() { 
    var file = document.getElementById('file').files[0], 
     r = new FileReader; 
    r.onloadend = function (e) { 
     var data = e.target.result; 
     console.log('data'); 
     console.log(data); 
     // http.post 
    }; 
    r.readAsArrayBuffer(file); 
}; 

そして、ここでは私のHTMLです：

<div data-ng-repeat="file in files"> 
    <div class="row top-buffer"> 
     <div class="col-lg-10"> 
      <input type="file" 
        ng-model="file.name" 
        name="file" 
        class="form-control" 
        id="file"> 
     </div> 
     <div class="col-lg-2 text-right"> 
      <div class="btn btn-primary" ng-click="uploadFile()">Upload</div> 
     </div> 
    </div> 
</div> 
<div class="row top-buffer"> 
    <div class="col-lg-11"></div> 
    <div class="col-lg-1 text-right"> 
     <div class="glyphicon glyphicon-plus" aria-hidden="true" ng-click="addNewFile()"></div> 
     <div class="glyphicon glyphicon-minus" aria-hidden="true" ng-click="removeFile()"></div> 
    </div> 
</div> 

n動的に生成されるファイルフィールドの値を取得します。

Answer 1

あり<input type=fileにはng-modelはありませんが、あなたはng-attrで動的にidを設定したいものを達成することができます

uploadFile()オン

<div ng-repeat="file in files"> 
    {{file.id}}: 
    <input type="file" 
     ng-attr-name="{{file.id}}" 
     ng-attr-id="{{file.id}}"> 
</div> 

あなたがそれらを投稿することができますフィドルの

$scope.uploadFile = function() { 
    $scope.files.forEach(function(file) { 
    // $http.post: document.getElementById(file.id).files[0]) 
    }); 
}; 

例： https://jsfiddle.net/virgilioafonsojr/92nw4j4f/1/

私はそれが役に立ちそうです。

Answer 2

アップローダを正しく書き込むことは非常に難しい作業です。アップロードコンポーネント/ディレクティブの大きな問題は、Internet Explorerで動作させることです。これはIEで一度しか使用できないためです。別の問題は、IEがボタンをプログラムで「押す」ことを許可しないことです。実際のマウスクリックでなければなりません。

AngularJsのアップロードライブラリはありますが、Googleだけです。しかし、あなたが自分でそれをやろうとするのであれば、どうやってやるべきかの例として私のgit repoを使うことができます。単にjwtUploaderとjwtUploaderButtonディレクティブを使用してください。

https://github.com/smylydon/SEPE-7WCM0033-0206-FRONTEND/tree/master/client/app