Question

这里有一个显示一个上传文件内容的例子。

的.js

$scope.uploadFilename = function (files) {
          if (!files[0]) {
            return;
          }

          var reader = new FileReader();

          reader.onload = function (e) {
            var str = reader.result;
            var csv = str.split(/\n/);
            var headers = csv[0].split(',');
            var str_result = '';
            for (var i = 1; i < csv.length - 1; i++) {
              var curline = csv[i].split(',');
              var tmp = '' + curline[1];
              if (i == csv.length - 2) {
                str_result += tmp.split('"').join('');
              } else {
                str_result += tmp.split('"').join('') + '\n';
              }
            }
            angular.element('#upload_keywords_list').val(str_result);
            $scope.uploadedKeywordsCount = csv.length - 2;
          };
          reader.readAsText(files[0]);
        };

html的

<div class="chosefile">
              <div class="clearfix">
                <input type="file" name="file" class="pull-left" onchange="angular.element(this).scope().uploadFilename(this.files)">
<textarea id="upload_keywords_list" class="form-control" rows="10"></textarea>
              <div class="uploaded-keywords-count" ng-if="uploadedKeywordsCount > 0">
                <strong>Total number: </strong>{{ uploadedKeywordsCount }}
              </div>
            </div>
          </div>

我想显示多个上传文件的内容。你能告诉我怎么做的方法吗？然后，当我编辑我已经打开的textarea的内容时，如何更改总数的值？

感谢。

Answer 1

希望这有效。

我从您的HTML中删除了uploaded-keywords-count和textarea。并添加了一个新的 div

<div id="textAreaContainer"></div>

我也改变了你的脚本。我将代码包装在for loop中现在，您可以选择多个文件，一次或一个一个它并不重要。

如果您尝试再次选择同一个文件，它会向您发出警告。并再次拒绝该文件。

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
  <div ng-app="fileApp" ng-controller="myCtrl">

    <script>
      var app = angular.module('fileApp', []);
      app.controller('myCtrl', function($scope) {
        var allFiles = [];
        $scope.uploadFilename = function (files) {
          if (!files[0]) {
            return;
          }

          cnt = files.length;
          for (var k = 0; k < cnt; k++) {
            if(!allFiles.includes(files[k].name)) {
              var reader = new FileReader();
              reader.fileName = files[k].name;
              allFiles.push(reader.fileName);
          reader.onload = function (e) {
            var str = e.target.result;
            var csv = str.split(/\n/);
            var headers = csv[0].split(',');
            var str_result = '';
            for (var i = 1; i < csv.length - 1; i++) {
              var curline = csv[i].split(',');
              var tmp = '' + curline[1];
              if (i == csv.length - 2) {
                str_result += tmp.split('"').join('');
              } else {
                str_result += tmp.split('"').join('') + '\n';
              }
            }
            $scope.uploadedKeywordsCount = csv.length - 2;
            var containerData = "";
            containerData += '<div id="fileContent' + k + '"><textarea>' + str_result + '</textarea>';
            containerData += '<span>' + $scope.uploadedKeywordsCount + '</span></div>'
            var containerHtml = $(containerData);
            angular.element('#textAreaContainer').append(containerHtml);
          };
          reader.readAsText(files[k]);
          //console.log(files[k]);
        } else {
          alert('File already exists');
        }

      }
    }
  });
      $(document).on('keyup', 'textarea', function(){
        $(this).closest("div").find('span').html($(this).val().split(/\n/).length);
      })
    </script>


    <div class="chosefile">
      <div class="clearfix">
        <input type="file" name="file" class="pull-left" onchange="angular.element(this).scope().uploadFilename(this.files)" multiple>
        <div id="textAreaContainer"></div>
      </div>
    </div>

  </div>

＆＃13;

我忘了告诉你我为你的第二个问题添加了一个新脚本。现在您可以编辑textarea，并且行数会更改。

如何显示多个上传文件的内容？

1 个答案: