web-dev-qa-db-fra.com

Angular js Type de fichier d'entrée - efface le fichier précédemment sélectionné

J'utilise input type="file" pour mon contrôle de téléchargement en utilisant js angulaire. Chaque fois que je clique sur Parcourir, je ne veux pas voir le fichier précédemment sélectionné. Par défaut, cela semble être conservé. Peut-on y parvenir en écrivant une directive? Peut-il être déclenché chaque fois que je clique sur parcourir?

J'utilise une implémentation d'amorçage pour remplacer le bouton de navigation par défaut par un meilleur.

 <span class="useBootstrap btn btn-default btn-file">
                Browse <input type="file"  />
            </span>
angularjstwitter-bootstrapangularjs-directiveinput-type-fileangular-file-upload
8
KeenUser

C'était le moyen le plus simple, sans utiliser de directive ni de code complexe.

Browse <input type="file" ng-click="clear()"

Et dans votre manette

 $scope.clear = function () {
    angular.element("input[type='file']").val(null);
};
34
KeenUser

Si nous utilisons la directive fileUpload, nous pouvons alors effacer les données des fichiers téléchargés directement à partir de HTML.

par exemple- 

Directive -

app.directive('fileModel', ['$parse', function ($parse) {
  return {
    restrict: 'A',
    link: function (scope, element, attrs) {
      var model = $parse(attrs.fileModel)
      var modelSetter = model.assign
      element.bind('change', function () {
        scope.$apply(function () {
          modelSetter(scope, element[0].files[0])
        })
  })
}

} }])

code HTML - champ de saisie du fichier de téléchargement 

<button ng-disabled="!myFile" class="btn btn-primary btn-rounded btn-ef btn-        
ef-5 btn-ef-5a mb-10 "
ng-click="uploadFile(myFile);myFile=''">Upload button
</button>

<button class="btn btn-danger btn-rounded btn-ef btn-ef-5 btn-ef-5a mb-10 "
ng-click="myFile=''">Clear
</button>

appelez le service http

  var fd = new FormData()
   fd.append('file', file) //File is from uploadFile(myFile)

   $http.post(url, fd, {
        transformRequest: angular.identity,
        headers: {
          'Content-Type': undefined,
          'sessionId': sessionId,
          'project': userProject
        }
      })
0
Rohit Parte
here is alternate way to clear input file type. 
HTML ->>
`<span class="useBootstrap btn btn-default btn-file">
   Browse <input type="file" ng-if="clearBtn" />
</span>`

Js ->>

`//initial loading
$scope.clearBtn = true;
// after submit / on reset function
$scope.submitform = function(){
//submit logic goes here;
//onsuccess function
$scope.clearBtn = false;
  $timeout(function(){
    $scope.clearBtn = true;
  });
}`
0
chandan