Téléchargement de fichier en utilisant angularjs

Question

Voici mon formulaire HTML

 <form name="myForm" ng-submit="">
    <input ng-model='file' type="file"/>
    <input type="submit" value='Submit'/>
</form>
 

Je souhaite télécharger une image depuis un ordinateur local et vouloir lire le contenu du fichier téléchargé. Tout ce que je veux faire en utilisant angularjs.

Lorsque j'essaie d'imprimer la valeur de $ scope.file, il est indéfini.

Answer 1

Veuillez noter que les solutions qui utilisent FormData(), tels que ceux présentés ici dans d'autres réponses, ne fonctionnent pas correctement dans les versions plus anciennes d'Internet Explorer. La solution correcte doit utiliser une stratégie de sauvegarde pour que, comme l'utilisation d'iframes. Il existe déjà de nombreux Angular.js modules pour exécuter le fichier de téléchargement:

• https://github.com/nervgh/angular-file-upload/
• https://github.com/leon/angular-upload
• https://github.com/uor/angular-file
• https://github.com/danialfarid/angular-file-upload
• https://github.com/twilson63/ngUpload
• https://github.com/uploadcare/angular-uploadcare

Je vous conseille d'en choisir une et de l'utiliser, ou d'avoir un coup d'oeil à son code.

Answer 2

Le plus simple est d'utiliser les API HTML5, à savoir l' FileReader (http://jsfiddle.net/f8Hee/1/).

HTML est assez simple:

<input type="file" id="file" name="file"/>
<button ng-click="add()">Add</button>

Dans votre contrôleur de définir "ajouter" de la méthode:

$scope.add = function(){
  var f = document.getElementById('file').files[0],
      r = new FileReader();
  r.onloadend = function(e){
    var data = e.target.result;
    //send you binary data via $http or $resource or do anything else with it
  }
  r.readAsBinaryString(f);
}

Remarque : readAsBinaryString() la méthode est obsolète et readAsArrayBuffer() doit être utilisé à la place.

Answer 3

Voici ci-dessous un exemple de téléchargement de fichier:

http://jsfiddle.net/vishalvasani/4hqVu/

Dans cette fonction appelée

 setFiles
 

De View qui mettra à jour le tableau de fichiers dans le contrôleur

ou

Vous pouvez vérifier le téléchargement de fichiers jQuery avec AngularJS

http://blueimp.github.io/jQuery-File-Upload/angularjs.html

Answer 4

Vous pouvez obtenir agréable de fichier et de dossier de téléchargement à l'aide de flow.js.

https://github.com/flowjs/ng-flow

Découvrez une démo ici

http://flowjs.github.io/ng-flow/

Il ne supporte pas IE7, IE8, IE9, de sorte que vous finirez par avoir à utiliser une couche de compatibilité

https://github.com/flowjs/fusty-flow.js

Answer 5

Le billet de blog à cet endroit (grâce à Jenny Louthan) contient une directive et un exemple de code. Et ça marche juste tout de suite. L'explication qui l'accompagne est très utile.

http://uncorkedstudios.com/blog/multipartformdata-file-upload-with-angularjs