Angular js Input type fichier - claire précédemment fichier sélectionné

Je suis en utilisant input type="file" pour mon contrôle de téléchargement à l'aide de angular js. Chaque fois que je clique sur parcourir, je ne veux pas voir le fichier préalablement sélectionné. Par défaut,ce qui semble être conservés. Peut-il être réalisé par la rédaction d'une directive? Peut-il être déclenché à chaque fois que je clique sur parcourir?

Je suis à l'aide d'un fichier d'amorce de la mise en œuvre de remplacer par défaut bouton parcourir avec certains mieux.

 <span class="useBootstrap btn btn-default btn-file">
                Browse <input type="file"  />
            </span>
voir si cela aide les stackoverflow.com/questions/15079779/...

OriginalL'auteur KeenUser | 2015-07-27

  1. 34

    C'était la façon la plus simple, sans l'aide de toute directive ou d'un code complexe.

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

    Et dans votre contrôleur

     $scope.clear = function () {
    angular.element("input[type='file']").val(null);
};
    Oui, en effet c'est une manière la plus facile.... Mais il n'est pas de la bonne façon. J'ai pris la peine de réécrire tout le code une fois de plus sous la forme de directives et de tout, c'est pourquoi je ne peux pas recommander cette approche.
    Cela s'est plaint qu'il ne peut pas utiliser jqLite pour les sélecteurs. Mais cela a bien fonctionné: var myEl = angulaire.élément( document.querySelector( '#quelques-id' ) );
    Si vous voulez un distinct Clear ou Cancel bouton, ajouter un id= à l'élément. E. g. id="fileSelector_1" and then angulaire.élément(document.querySelector('#fileSelector_1')).val(null); " Ce qui fonctionne pour moi. Je l'utilise pour effacer à la fois sur les Save et Cancel boutons,

    OriginalL'auteur KeenUser

  2. 0
    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;
  });
}`

    OriginalL'auteur chandan

  3. 0

    Si nous utilisons fileUpload directive, alors nous pouvons clairement téléchargé fichier de données directement à partir de HTML.

    e:g-

    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 de téléchargement de fichier champ de saisie 

    <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>

    appel de 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
        }
      })

    OriginalL'auteur Rohit Parte