Voici mon formulaire HTML :
<form name="myForm" ng-submit="">
<input ng-model='file' type="file"/>
<input type="submit" value='Submit'/>
</form>
Je veux télécharger une image à partir de la machine locale et je veux lire le contenu du fichier téléchargé. Tout cela, je veux le faire en utilisant AngularJS.
Lorsque j'essaie d'imprimer la valeur de $scope.file
, le résultat est indéfini.
Certaines réponses proposent d'utiliser FormData()
, mais malheureusement c'est un objet de navigateur qui n'est pas disponible dans Internet Explorer 9 et moins. Si vous devez prendre en charge ces anciens navigateurs, vous aurez besoin d'une stratégie de secours, comme l'utilisation d'un "iframe" ou de Flash.
Il existe déjà de nombreux modules Angular.js pour effectuer le téléchargement de fichiers. Ces deux modules prennent explicitement en charge les anciens navigateurs :
Et d'autres options :
L'un d'entre eux devrait convenir à votre projet ou vous donner un aperçu de la manière de le coder vous-même.
[1] : https://github.com/nervgh/angular-file-upload/ [2] : https://github.com/leon/angular-upload [3] : https://github.com/uor/angular-file [4] : https://github.com/danialfarid/angular-file-upload [5] : https://github.com/twilson63/ngUpload [6] : https://github.com/uploadcare/angular-uploadcare
Voici un exemple de téléchargement de fichier :
Dans cet exemple, une fonction appelée
setFiles
From View qui va mettre à jour le tableau de fichiers dans le contrôleur.
ou
Vous pouvez vérifier jQuery File Upload en utilisant AngularJS.
[
]() fonctionne bien dans chrome et IE (si vous modifiez un peu le CSS dans background-image). Elle est utilisée pour la mise à jour de la barre de progression : scope.progress = Math.round(evt.loaded * 100 / evt.total)
mais dans FireFox, les données [percent] d'Angular ne sont pas mises à jour dans le DOM avec succès, bien que les fichiers soient téléchargés avec succès.