показать список файлов, выбранных из разных каталогов и возможность удаления файлов - PullRequest
Новая
       2

показать список файлов, выбранных из разных каталогов и возможность удаления файлов

0 голосов
/ 24 июня 2018

Я пытаюсь прикрепить некоторые файлы (ноль / один / несколько) и отправить их в виде вложений на электронную почту, используя 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>

ЯШ: 

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

1 Ответ

0 голосов
/ 24 июня 2018

Поведение браузера по умолчанию показывает выбранные в данный момент файлы, чтобы указать, что вы должны настроить это поле. Кроме того, я видел ваш собственный код директивы, он не позволяет выбирать несколько файлов из разных каталогов. Итак, вы можете создать еще одну переменную области видимости, и каждый раз, когда пользователь выбирает файл / файлы, вы помещаете эти файлы в этот массив. Таким образом, у вас есть набор всех выбранных файлов из одних и тех же / разных каталогов, а затем вы можете иметь функцию удаления для каждого файла, который в конечном итоге будет обновлен. Обновлен 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>

И для этой новой области действия директивы обновления массива. $ Apply part as: 

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

Пример рабочей демонстрации

Теперь пользователь сможет удалять файлы в любое время. Но поле ввода будет по-прежнему отображать последний выбранный файл / файлы и после удаления определенного файла также не изменит его статус, поэтому вы можете просто скрыть поле с непрозрачностью: 0; css & затем создайте настроенную кнопку «Upload» и нажмите на этот фактический скрытый элемент ввода файла.

Обновление : проверьте это обновление того же кода с помощью пользовательской кнопки загрузки: Пример Plunker

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...