如何在AngularJs中將多個文件添加到數組中並逐個訪問文件

我想將多個文件添加到文件數組中，然後再訪問AngularJ中的每個文件。到目前爲止，我已經創建了自定義指令來讀取看着一些posts.it文件工作正常與單個文件。但我的要求是，我想上傳多個文件，並將它們添加到數組中，然後在訪問數據時訪問創建的文件數組。我是AngularJs的新手請幫助我實現這一目標。如何在AngularJs中將多個文件添加到數組中並逐個訪問文件

HTML代碼片段

<div class="input input-file "> 
     <span class="button"><input on-read-file="readFileContent($fileContent)" 
    type="file" id="attachments" name="file" data-ng-model="attachments" 
    onchange="this.parentNode.nextSibling.value = this.value">Browse</span> 
<input type="text" placeholder="Attach some files" readonly=""> 
</div>

讀輸入自定義指令文件

var mimeType,fileName; 
testModule.directive('onReadFile', function ($parse) { 

    return { 
     restrict: 'A', 
     scope: false, 
     link: function(scope, element, attrs) { 
      var fn = $parse(attrs.onReadFile); 

      element.on('change', function(onChangeEvent) { 
       var reader = new FileReader(); 

       reader.onload = function(onLoadEvent) { 

        scope.$apply(function() { 
         fn(scope, {$fileContent:onLoadEvent.target.result}); 
        }); 

       }; 


       reader.readAsText((onChangeEvent.srcElement || onChangeEvent.target).files[0]); 

       //Get the Uploaded file mime type 
       mimeType=(onChangeEvent.srcElement || onChangeEvent.target).files[0].type; 
       fileName=(onChangeEvent.srcElement || onChangeEvent.target).files[0].name; 

      }); 
     } 
    }; 
});

讀取文件內容方法

$scope.readFileContent = function($fileContent){ 

    $scope.content = $fileContent; 
      };

來源

2016-01-21 gihan

請問您可以添加代碼的小提琴嗎？ –

@Kunal Kakkad這裏是原來的小提琴鏈接http://jsfiddle.net/alexsuch/6aG4x/這支持只有單個文件上傳，但我想上傳多個文件，並在 – gihan

我建議檢查StackOverflow的這篇文章：

Upload multiple files in angular

答案之一包含此工作示例：

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

它採用了指令名爲NG文件模型：

<input type="file" ng-file-model="files" multiple />

來源

2016-01-21 10:36:07 beaver

以後閱讀它們謝謝你是我搜索的東西。 – gihan

如何讀取文件內容？是否可以將文件obj列表發送到服務器端並訪問這些文件objs？ – gihan

你可以檢查這個https://github.com/danialfarid/ng-file-upload – beaver

如何在AngularJs中將多個文件添加到數組中並逐個訪問文件

回答

相關問題