Wie können Inhalte von Multi-Upload-Dateien angezeigt werden?

Question

Hier ist ein Beispiel, um den Inhalt einer Upload-Datei anzuzeigen.

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> 

I Inhalt von Multi-Upload-Dateien angezeigt werden sollen. Können Sie mir die Methode sagen, wie es geht? Und dann, wie den Wert der Gesamtzahl ändern, wenn ich den Inhalt der Textarea bearbeiten, die ich bereits geöffnet habe?

Danke.

Answer 1

Ich hoffe, das funktioniert.

Ich entfernte uploaded-keywords-count und textarea von Ihrem HTML. Und hat ein neues div

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

Auch machte ich Änderungen an Ihrem Skript. Ich wickelte Ihren Code innerhalb for loop Jetzt können Sie mehrere Dateien auswählen, auf einmal oder eins nach dem anderen ist es egal.

Und wenn Sie versuchen, die gleiche Datei erneut auszuwählen, warnt es Sie. und lehnt die Datei erneut ab.

<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>

ich vergessen, Ihnen zu sagen, dass ich ein neues Skript für Ihre zweite Frage hinzugefügt. Jetzt können Sie den Textbereich bearbeiten, und die Zeilen zählen Änderungen.