Question

我正在尝试上传多个允许用户上传多个文件的文件。

我第一次能够上传文件，但是当我第二次选择上传文件时，文件名第三次会出现三次。

这是我的代码：

<body ng-app='myApp' ng-controller='myCtrl'>
  <input type="file" class="filePost" name="file" id="filePost" multiple="" ng-click='getSelectedFile()'>
  <div id='files_list'>
    <ul> </ul>
  </div>
  <script>
    var app = angular.module('myApp', []);
    app.controller('myCtrl', function($scope) {
      $scope.getSelectedFile = function() {
        $("#filePost").change(function() {
          var ele = document.getElementById('filePost');
          var result = ele.files;
          for (var x = 0; x < result.length; x++) {
            var file = result[x];
            $("#files_list ul").append(
              "<li class='list_item'>" + file.name + " " + "<span 
              class = 'remove' > X < /span>" +"</li > "
            );
          }
          $(document).on('click', '.remove', function() {
            var span_id = $(this.parentNode).text();
            $(this).closest('li').remove();
          });
        });
      }
    });
  </script>
</body>

Answer 1

我在plunker上做了一个例子.. 希望你能理解。

Multiple uploading Files in Angular App Example

在html中 -

<body ng-controller="myCtrl">
    <p>Hello {{name}}!</p>
    <input type="file" ng-file-model="files" multiple />
    <button type="button" ng-click="upload()">Upload</button>

    <p ng-repeat="file in files">
      {{file.name}}
    </p>
  </body>

在js -

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

app.controller('MyCtrl', function($scope) {
  $scope.name = 'World';
  $scope.files = []; 
  $scope.upload=function(){
    alert($scope.files.length+" files selected ... Write your Upload Code"); 

  };
});


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 = [];
                angular.forEach(element[0].files, function (item) {
                    var value = {
                       // File Name 
                        name: item.name,
                        //File Size 
                        size: item.size,
                        //File URL to view 
                        url: URL.createObjectURL(item),
                        // File Input Value 
                        _file: item
                    };
                    values.push(value);
                });
                scope.$apply(function () {
                    if (isMultiple) {
                        modelSetter(scope, values);
                    } else {
                        modelSetter(scope, values[0]);
                    }
                });
            });
        }
    };
}]);

如果你还没有......通知我。

Answer 2

这有很多问题。

您的追加应遵循标准的字符串换行。当尝试将HTML推送到DOM时，大多数人会建议“这是一个字符串”而不是“这是一个字符串”。
如果您正在将HTML推入DOM，请确保最后评估的字符串是正确的HTML。

class ='remove'＆gt; X＆lt; / span＆gt;“+”“

从第1点开始2你的JS中的HTML应该是

$('#files_list ul').append( '<li class="list_item">' + file.name + ' ' + '<span class="remove"> X </span>'+'</li>');

我认为您遇到的主要问题是不擦除以前的上传内容。一种方法是在更改事件开始时删除ul标记内的HTML，而不是在文档中单击时单击。

Answer 3

出现此问题是因为浏览器在更改后没有清除存储在文件输入中的文件列表，因此请尝试使用此编辑的代码完全删除该文件输入并再次将其添加到正文中，以便删除文件读完后

<body ng-app='myApp' ng-controller='myCtrl'>
  <input type="file" class="filePost" name="file" id="filePost" multiple="" ng-click='getSelectedFile()'>
  <div id='files_list'>
    <ul> </ul>
  </div>
  <script>
    var app = angular.module('myApp', []);
    app.controller('myCtrl', function($scope) {
      $scope.getSelectedFile = function() {
        $(document).on('change',"#filePost",function() {
          var ele = document.getElementById('filePost');
          var result = ele.files;
          for (var x = 0; x < result.length; x++) {
            var file = result[x];
            $("#files_list ul").append(
              "<li class='list_item'>" + file.name + " " + "<span class = 'remove' > X < /span>" +"</li > "
            );
          }
          $("#filePost").remove();
          $("body").prepend('<input type="file" class="filePost" name="file" id="filePost" multiple="" ng-click='getSelectedFile()'>');
        });

        $(document).on('click', '.remove', function() {
          var span_id = $(this.parentNode).text();
          $(this).closest('li').remove();
        });
      }
    });
  </script>
</body>

选择多个文件

3 个答案: