Angular JS에서 파일 입력을 지우는 방법

Angular JS에서 파일 입력을 지우는 방법

AngularJS에서는 입력 type=file을 처리하기 위해 여기서 설명하는 방법을 사용하고 있습니다.

• https://groups.google.com/forum/?from groups=#!토픽/각도/-OpgmLjFR_U
• http://jsfiddle.net/marcenuc/ADukg/89/

마크업:

<div ng-controller="MyCtrl">
    <input type="file" onchange="angular.element(this).scope().setFile(this)">
    {{theFile.name}}
</div>

컨트롤러:

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

myApp.controller('MyCtrl', function($scope) {
    $scope.setFile = function(element) {
        $scope.$apply(function($scope) {
            $scope.theFile = element.files[0];
        });
    };
});

말씀드렸듯이 이건 좀 엉터리지만, 대부분 제 목적에 부합합니다.다만, 필요한 것은, 업로드를 완료한 후에, 즉 컨트롤러로부터 파일 입력을 클리어 하는 방법입니다.

완전히 해킹해서 jQuery 같은 걸로 입력 요소를 찾아서 클리어 할 수 있는데 좀 더 우아한 걸 원했어요.

업로드가 성공하면 다음과 같이 입력 유형의 파일 요소를 컨트롤러에서 명시적으로 클리어합니다.

  angular.forEach(
    angular.element("input[type='file']"),
    function(inputElem) {
      angular.element(inputElem).val(null);
    });

그input[type='file']selector에는 jQuery가 필요하지만 다른 모든 것은 일반 Angular입니다.

이런 일에는 반드시 지령을 사용합니다.

http://plnkr.co/edit/xLM9VX

app.directive('fileSelect', function() {
  var template = '<input type="file" name="files"/>';
  return function( scope, elem, attrs ) {
    var selector = $( template );
    elem.append(selector);
    selector.bind('change', function( event ) {
      scope.$apply(function() {
        scope[ attrs.fileSelect ] = event.originalEvent.target.files;
      });
    });
    scope.$watch(attrs.fileSelect, function(file) {
      selector.val(file);
    });
  };
});

주의: 요소 작성에 jquery를 사용하고 있습니다.

$120을 사용하지 않고 솔루션을 제공합니다.

app.directive('fileChange',['UploadService',function (UploadService) {
    var linker = function (element, attrs) {
        element.bind('change', function (event) {
            var files = event.target.files;
            UploadService.upload({'name':attrs['name'],'file':files[0]});
            element.val(null);  // clear input
        });
    };
    return {
        restrict: 'A',
        link: linker
    };
}]);

도움이 될 수도 있어!!

HTML 코드 샘플

 <input type="file" id="fileMobile" file-model="myFile">
 <button type="button" class="btn btn-danger" id="i-agree" ng-click="uploadFile()"> Upload </button>

AngularJs 코드 샘플

$scope.uploadFile = function () {
    var file = $scope.myFile;
    mobileService.uploadBulkFile(file).then(function (resp) {
        if (resp !== undefined) {
            $('#fileMobile').val('');
        }
    });
};

ID를 사용하여 파일 필드를 재설정할 수 있습니다.

<div class="col-md-8">  
    <label for="files">Select File</label>
    <input type="file" id="file_upload" class="form-control">
</div>

업로드 후 클리어합니다.

var fileElement = angular.element('#file_upload');
angular.element(fileElement).val(null);

위의 예는 나에게 도움이 된다.너한테도 효과가 있을 거야.

저 같은 경우에는 파일 업로드가 성공했을 때 이벤트를 브로드캐스트합니다.그래서 제 디렉티브는 브로드캐스트를 감시하고 선택을 지웁니다.

app.directive("fileInput", function( APP_EVENTS ){
    return{
        require: "ngModel",
        link: function postLink( scope, elem, attrs, ngModel ){

            elem.on("change", function( e ){
                var files=elem[0].files;
                ngModel.$setViewValue( files );
            });

            scope.$on( APP_EVENTS.FILE_UPLOAD_SUCCESS, function( event ){
                elem.val( null );
            });
        }
    }
});

다음과 같이 사용됩니다.

<input type="file" name="myFieldName" ng-model="myModel" file-input/>

언급URL : https://stackoverflow.com/questions/15079779/how-to-clear-a-file-input-from-angular-js