Cách xóa đầu vào tệp từ Angular JS

Question

Trong AngularJS, tôi đang sử dụng cách tiếp cận được mô tả ở đây để xử lý kiểu đầu vào = tệp.

• https://groups.google.com/forum/?fromgroups=#!topic/angular/-OpgmLjFR_U
• http://jsfiddle.net/marcenuc/ADukg/89/

Markup:

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

Bộ điều khiển:

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

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

Như đã đề cập đó là một chút của một hack, nhưng nó MOS tly làm việc cho mục đích của tôi. Những gì tôi cần tuy nhiên là một cách để xóa các tập tin đầu vào sau khi tải lên đã hoàn thành - tức là: từ bộ điều khiển.

Tôi hoàn toàn có thể hack nó và sử dụng jQuery hoặc một cái gì đó để tìm phần tử đầu vào và xóa nó, nhưng đã hy vọng cho một cái gì đó thanh lịch hơn một chút.

Answer 1

Tôi chắc chắn sẽ sử dụng chỉ thị cho loại nhiệm vụ này.

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

lưu ý: nó được sử dụng jquery để tạo yếu tố.

Answer 2

Upon a upload thành công, tôi làm sáng tỏ các yếu tố tập tin loại đầu vào một cách rõ ràng từ bộ điều khiển của tôi, như vậy:

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

Bộ chọn input[type='file'] đòi hỏi jQuery, nhưng mọi thứ khác là đồng bằng góc.

Answer 3

giải pháp của tôi mà không cần sử dụng phạm vi $.

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

Answer 4

Nó có thể giúp bạn !!

HTML code mẫu

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

AngularJs mẫu mã

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

Answer 5

Bạn có thể sử dụng ID để thiết lập lại sân tập.

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

Sau khi tải lên, hãy xóa nó.

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

Ví dụ trên làm việc tốt cho tôi. Sẽ làm việc cho bạn quá.