Home / Questions / 137977
Accepted
Bernardo Harreguy
Asked: 2020-02-13 10:39:36 +0800 CST 2020-02-13 10:39:36 +0800 CST

选择文件夹中给定类型的所有文件

  • 772

我正在寻找一种在文件夹（探索目录和子目录）中递归搜索要使用 AngularJS Upload 上传的文件的方法，但重要的是列出文件并在本地文件夹中搜索。也就是一个以数组形式返回的函数，比如在指定文件夹中找到的mp3文件，我对上传部分没那么感兴趣。

如果可能的话，这个想法是在 AngularJS 中完成，或者通过 JavaScript 或 jQuery 完成。有人知道吗？如果它找到具有相同名称的文件也很好，只取一个，而不是两个。

javascript

1 Answers

  1. Best Answer

    为了能够搜索整个目录和特定目录的子目录，可以按如下方式完成：

    var app = angular.module('myApp', []);
app.controller('SubirArchivos', function($scope, $http, $parse) {
  $scope.name = 'World';
  $scope.files = [];

  //a partir de aqui el codigo no funciona como deberia
  $scope.upload = function(element) {
    //aqui comienza el codigo de funcion para subir archivos
    console.log("intentando subir");
    angular.forEach(element[0].files, function(item) {
      console.log("intentando subir");
      var fd = new FormData();
      fd.append('file', item);
      $http.post(item.url, fd, {
        transformRequest: angular.identity,
        headers: {
          'Content-Type': undefined
        }
      }).then(function(success) {
        console.log("subido " + success.data.data);
        return success.data.data;
      });
    });
    // aqui finaliza la funcion encargada de subir archivos         
  };

});

app.directive('ngFileModel', ['$parse', function($parse) {
  return {
    restrict: 'A',
    link: function(scope, element, attrs) {
      var model = $parse(attrs.ngFileModel);
      var isMultiple = attrs.multiple;
      var modelSetter = model.assign;
      element.bind('change', function() {
        var values = [];
        /*if (files != null)
         element.push(files);*/
        angular.forEach(element[0].files, function(item) {
          if (item.name.endsWith("mp3")) {
            var value = {
              name: item.name,
              size: item.size,
              url: URL.createObjectURL(item),
              _file: item
            };
            values.push(value);
          }
        });

        scope.$apply(function() {
          if (isMultiple) {
            modelSetter(scope, values);

          } else {
            modelSetter(scope, values[0]);
          }
        });
      });
    }
  };
}]);
    <!DOCTYPE html>
<html ng-app="myApp">

<head>
  <meta charset="utf-8" />
  <title>prueba</title>
  <script>
    document.write('<base href="' + document.location + '" />');
  </script>
</head>

<body>

  <div ng-controller="SubirArchivos">
    <input type="file" webkitdirectory directory ng-file-model="files" multiple />
    <button type="button" ng-click="upload();">Subir archivos</button>

    <p ng-repeat="file in files">
      {{file.name}}
    </p>
  </div>
  <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>
</body>

</html>

    通过这种方式，您可以选择一个目录，它将选择所有文件，并且只获取在 mp3 中完成的文件

    • 0