J'ai essayé d'utiliser ng-model sur une balise d'entrée avec un fichier de type:
<input type="file" ng-model="vm.uploadme" />
Mais après avoir sélectionné un fichier, dans le contrôleur, $ scope.vm.uploadme n'est toujours pas défini.
Comment obtenir le fichier sélectionné dans mon contrôleur?
angularjs
angularjs-ng-model
angularjs-fileupload
Endy Tjahjono
la source
la source
Réponses:
J'ai créé une solution de contournement avec directive:
Et la balise d'entrée devient:
Ou si seulement la définition du fichier est nécessaire:
la source
J'utilise cette directive:
et l'invoquer comme ceci:
La propriété (editItem.editItem._attachments_uri.image) sera remplie avec le contenu du fichier que vous sélectionnez comme uri de données (!).
Veuillez noter que ce script ne téléchargera rien. Il ne remplira votre modèle qu'avec le contenu de votre fichier encodé et un uri de données (base64).
Découvrez une démonstration de travail ici: http://plnkr.co/CMiHKv2BEidM9SShm9Vv
la source
ngModel
la$render
fonction?Comment permettre
<input type="file">
de travailler avecng-model
Démonstration de travail d'une directive qui fonctionne avec
ng-model
La
ng-model
directive de base ne fonctionne pas avec<input type="file">
out of the box.Cette directive personnalisée permet
ng-model
et a l'avantage de permettre auxng-change
,ng-required
et desng-form
directives pour travailler avec<input type="file">
.la source
Ceci est un addendum à la solution de @ endy-tjahjono.
J'ai fini par ne pas pouvoir obtenir la valeur de uploadme de la portée. Même si uploadme dans le HTML était visiblement mis à jour par la directive, je ne pouvais toujours pas accéder à sa valeur par $ scope.uploadme. J'ai cependant pu définir sa valeur à partir de la portée. Mystérieux, non ..?
Il s'est avéré qu'une portée enfant a été créée par la directive et que la portée enfant avait son propre uploadme .
La solution consistait à utiliser un objet plutôt qu'une primitive pour conserver la valeur de uploadme .
Dans le contrôleur, j'ai:
et dans le HTML:
Il n'y a aucun changement à la directive.
Maintenant, tout fonctionne comme prévu. Je peux récupérer la valeur de uploadme.src sur mon contrôleur en utilisant $ scope.uploadme.
la source
$scope.uploadme = { src: '' }
Salut les gars, je crée une directive et je m'inscris sur bower.
cette bibliothèque vous aidera à modéliser le fichier d'entrée, non seulement à renvoyer les données du fichier mais aussi le fichier dataurl ou la base 64.
https://github.com/mistralworks/ng-file-model/
L'espoir vous aidera
la source
reader.readAsDataURL
méthode est obsolète. Le code moderne utilise URL.create ObjectURL () .Il s'agit d'une version légèrement modifiée qui vous permet de spécifier le nom de l'attribut dans la portée, tout comme vous le feriez avec ng-model, utilisation:
Directif:
la source
Pour la saisie de plusieurs fichiers en utilisant lodash ou underscore:
la source
la source
J'ai dû faire de même sur plusieurs entrées, j'ai donc mis à jour la méthode @Endy Tjahjono. Il renvoie un tableau contenant tous les fichiers lus.
la source
J'ai dû modifier la directive d'Endy afin de pouvoir obtenir Last Modified, lastModifiedDate, nom, taille, type et données ainsi que pouvoir obtenir un tableau de fichiers. Pour ceux d'entre vous qui avaient besoin de ces fonctionnalités supplémentaires, c'est parti.
MISE À JOUR: J'ai trouvé un bogue où si vous sélectionnez le (s) fichier (s) puis allez à nouveau sélectionner mais annulez à la place, les fichiers ne sont jamais désélectionnés comme il apparaît. J'ai donc mis à jour mon code pour y remédier.
la source
Si vous voulez quelque chose d'un peu plus élégant / intégré, vous pouvez utiliser un décorateur pour étendre la
input
directive avec le support detype=file
. La principale mise en garde à garder à l'esprit est que cette méthode ne fonctionnera pas dans IE9 car IE9 n'a pas implémenté l'API de fichier . L'utilisation de JavaScript pour télécharger des données binaires quel que soit leur type via XHR n'est tout simplement pas possible en natif dans IE9 ou antérieur (l'utilisation deActiveXObject
pour accéder au système de fichiers local ne compte pas car l'utilisation d'ActiveX demande simplement des problèmes de sécurité).Cette méthode exacte nécessite également AngularJS 1.4.x ou version ultérieure, mais vous pourrez peut-être l'adapter à l'utilisation
$provide.decorator
plutôt queangular.Module.decorator
- j'ai écrit cet essentiel pour montrer comment le faire tout en se conformant au guide de style AngularJS de John Papa :Pourquoi cela n'a-t-il pas été fait en premier lieu? La prise en charge d'AngularJS est destinée à n'atteindre que IE9. Si vous n'êtes pas d'accord avec cette décision et que vous pensez qu'ils auraient dû le mettre de toute façon, sautez le wagon vers Angular 2+ car un meilleur support moderne est littéralement la raison pour laquelle Angular 2 existe.
la source
Essayez ceci, cela fonctionne pour moi dans JS angulaire
la source