2016-03-07 39 views

回答

0

最好的partice總是用我們的php,nodeJS或後端langaugae來做這樣的事情,但在你的情況下,你可能會使用angularJS。

添加下面你JS

var myapp = angular.module('myapp', []); 

myapp.controller('MainCtrl', function ($scope) { 
    $scope.showContent = function($fileContent){ 
     $scope.content = $fileContent; 
    }; 
    }); 

myapp.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]); 
      }); 
     } 
    }; 
}); 

下面是HTML正文:

<div ng-controller="MainCtrl" class="container"> 
    <h1>Select text file</h1> 
    <input type="file" on-read-file="showContent($fileContent)" /> 
    <div ng-if="content"> 
     <h2>File content is:</h2> 
     <pre>{{ content }}</pre> 
    </div> 
</div> 

請記住,讀,寫和保存功能應始終在後臺完成端側。

+0

我不想將文件讀取爲,我想要硬編碼文件目錄的路徑並且讀取 – Ram

+0

您可以自行完成,只需聲明一個新的變量並將其設置爲默認值,那麼它將按照您的說法進行操作。像var Url =「/desktop/text.txt」; 。你也可以看看http://stackoverflow.com/questions/13020821/how-to-load-json-into-my-angular-js-ng-model – anson920520

相關問題