Fatal编程技术网

Javascript 选择多个文件

javascript jquery angular

Javascript 选择多个文件,javascript,jquery,angular,Javascript,Jquery,Angular,我试图上传多个文件，允许用户上传多个文件 第一次我可以上传文件，但当我选择第二次时，它会出现两次，第三次文件名会出现三次 这是我的密码： <body ng-app='myApp' ng-controller='myCtrl'> <input type="file" class="filePost" name="file" id="filePost" multiple="" ng-click='getSelectedFile()'> <div id='file

我试图上传多个文件，允许用户上传多个文件

第一次我可以上传文件，但当我选择第二次时，它会出现两次，第三次文件名会出现三次

这是我的密码：

<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>
我在普朗克身上做了一个例子。。 希望你能理解

在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>
如果你仍然没有……通知我。

这有很多问题

您的附加应该遵循标准的字符串换行。当试图将HTML推送到DOM时，大多数人会建议使用“thisastring”而不是“thisastring”

如果要将HTML推入DOM，请确保最后计算的字符串是正确的HTML

class='remove'>X+

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

$'files\u list ul'。追加 +file.name++'+'X'+

我相信你遇到的主要问题是没有擦除以前的上传。一种方法是在更改事件开始时删除ul标记中的HTML，而不是在文档中单击。
出现此问题的原因是，浏览器在更改后不会清除存储在文件输入中的文件列表，因此请尝试此编辑代码，在该代码中，该文件输入将被完全删除，并再次添加到正文的前面，以便在读取后将文件删除

<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>
“文件名出现三次”是什么意思？此外，您的代码在每次更改文件输入时都会在“.remove”上添加一个单击事件，因为您使用了$document.on，所以它不是必需的 
<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>