Este es mi formulario html
<form name="myForm" ng-submit="">
<input ng-model='file' type="file"/>
<input type="submit" value='Submit'/>
</form>Quiero subir una imagen desde la máquina local y quiero leer el contenido del archivo subido. Todo esto lo quiero hacer usando angularjs.
Cuando intento imprimir el valor de $scope.file aparece como indefinido.
Tenga en cuenta que las soluciones que utilizan FormData(), como las presentadas aquí en otras respuestas, no funcionan correctamente en versiones antiguas de Internet Explorer. La solución correcta debe utilizar una estrategia de respaldo para ello, como el uso de iframes. Ya existen muchos módulos de Angular.JS para realizar la carga de archivos:
Te aconsejo que elijas uno y lo uses, o que eches un vistazo a su código.
Lo más sencillo es utilizar la API de HTML5, es decir FileReader ( http://jsfiddle.net/f8Hee/1/ ).
El HTML es bastante sencillo:
<input type="file" id="file" name="file"/>
<button ng-click="add()">Add</button>En tu controlador define el método 'add':
$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);
}_Nota : el método readAsBinaryString() está obsoleto y readAsArrayBuffer() debería utilizarse en su lugar._
A continuación se muestra un ejemplo de carga de archivos:
http://jsfiddle.net/vishalvasani/4hqVu/
En esta función llamada
setFilesDesde la Vista que actualizará el archivo Array en el controlador
o
Puedes comprobar jQuery File Upload using AngularJS
Puede lograr una buena carga de archivos y carpetas utilizando flow.JS .
https://github.com/flowjs/ng-flow
Vea una demostración aquí
http://flowjs.github.io/ng-flow/
No es compatible con IE7, IE8, IE9, por lo que finalmente tendrá que utilizar una capa de compatibilidad
La entrada del blog en este lugar (gracias a Jenny Louthan) contiene una directiva y un código de ejemplo. Y funciona directamente desde el principio. La explicación que la acompaña es muy útil.
http://uncorkedstudios.com/blog/multipartformdata-file-upload-with-angularjs
Iteramos es una comunidad de desarrolladores que busca expandir el conocimiento de la programación mas allá del inglés.
Tenemos una gran cantidad de contenido, y también puedes hacer tus propias preguntas o resolver las de los demás.
