时间戳

首页 > 解决方案 > 显示从不同目录中选择的文件列表以及删除文件的能力

html - 显示从不同目录中选择的文件列表以及删除文件的能力

问题描述

我正在尝试附加一些文件（零/单个/多个）并使用 ANGULARJS 和 spring 将它们作为附件发送到电子邮件中。

需要注意的一件事是，从多个目录中选择文件时，仅显示最近选择的文件，而不显示以前选择的文件。我怎样才能显示用户从不同目录中选择的所有文件，并在提交表单之前提供删除文件（所有文件或一个文件）的能力。

演示：http ://plnkr.co/edit/M3f0TxHNozRxFEnrqyiF?p=preview

html:

<body ng-controller="MainCtrl">
<p>Hello {{name}}!</p>
TO: <input type="text" name="to" id="to"  ng-model="to" required ></input><br>
Subject : <input type="text" name="subject" id="subject"  ng-model="subject"></input>
<br>Attachment:  <input type="file" ng-file-model="files" multiple /> <br>
 <p ng-repeat="file in files">
  {{file.name}}
</p>
<textarea rows="20" maxlength=35000 name="message"  ng-model="message" ></textarea>
<button type="button" ng-click="upload()">Send</button>
</body>

js：

app.controller('MainCtrl', function($scope) {
  $scope.name = 'World';
  $scope.files = []; 
  $scope.upload=function(){
    alert($scope.files.length+" files selected ... Write your Code to send the mail"); 

  };
});


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]);
                    }
                });
            });
        }
    };
}]);

标签： htmlangularjsspring

解决方案

默认浏览器行为显示当前选定的文件，以更改您必须自定义该文件。而且，我看到了你的自定义指令代码，它不允许从不同的目录中选择多个文件。所以，你可以做的是，创建另一个范围变量 & 每次用户选择文件/文件时，你将这些文件推送到这个数组。通过这种方式，您已经设置了来自相同/不同目录的所有选定文件，然后您可以对最终将要更新的每个文件具有删除功能。更新了 html 视图部分：

Attachment:  <input type="file" ng-file-model="files" multiple /><br>
<p ng-repeat="file in filesToUpload track by $index">
    {{file.name}} <span class="delete-file" ng-click="deleteFile($index)">X</span>
</p>

对于这个新的数组更新指令 scope.$apply 部分为：

scope.$apply(function () {
    if (isMultiple) {
        modelSetter(scope, values);
    } else {
        modelSetter(scope, values[0]);
    }
    if(values){
      scope.filesToUpload = scope.filesToUpload.concat(values);
    }
});

在控制器中具有 deleteFile 功能：

$scope.deleteFile = function(index){
  $scope.filesToUpload.splice(index, 1);
};

工作演示示例

现在用户可以随时删除文件。但是输入字段仍将显示最后选择的文件/文件，并且在删除特定文件后它也不会更改其状态，因此您可以通过 opacity: 0; 隐藏字段；css 然后创建自定义的上传按钮并从该触发器单击实际隐藏的文件输入元素。

更新：使用自定义上传按钮检查相同代码的更新： Plunker Example

推荐阅读