Carga de archivos usando AngularJS
Aquí está mi formulario HTML:
<form name="myForm" ng-submit="">
<input ng-model='file' type="file"/>
<input type="submit" value='Submit'/>
</form>
Quiero cargar una imagen desde la máquina local y quiero leer el contenido del archivo cargado. Todo esto lo quiero hacer usando AngularJS.
Cuando intento imprimir, el valor $scope.fileaparece como indefinido.
Algunas de las respuestas aquí proponen usar FormData(), pero desafortunadamente es un objeto del navegador que no está disponible en Internet Explorer 9 y versiones anteriores. Si necesita admitir esos navegadores más antiguos, necesitará una estrategia de respaldo, como usar <iframe>Flash.
Ya existen muchos módulos de Angular.js para realizar la carga de archivos. Estos dos tienen soporte explícito para navegadores más antiguos:
- https://github.com/leon/angular-upload : utiliza iframes como alternativa
- https://github.com/danialfarid/ng-file-upload : utiliza FileAPI/Flash como alternativa
Y algunas otras opciones:
- https://github.com/nervgh/angular-file-upload/
- https://github.com/uor/angular-file
- https://github.com/twilson63/ngUpload
- https://github.com/uploadcare/angular-uploadcare
Uno de estos debería adaptarse a su proyecto o puede brindarle una idea de cómo codificarlo usted mismo.
Lo más sencillo es utilizar la API HTML5, es decirFileReader
HTML es bastante sencillo:
<input type="file" id="file" name="file"/>
<button ng-click="add()">Add</button>
En su controlador defina el método 'agregar':
$scope.add = function() {
var f = document.getElementById('file').files[0],
r = new FileReader();
r.onloadend = function(e) {
var data = e.target.result;
//send your binary data via $http or $resource or do anything else with it
}
r.readAsBinaryString(f);
}
Compatibilidad del navegador
Navegadores de escritorio
Edge 12, Firefox (Gecko) 3.6 (1.9.2), Chrome 7, Opera* 12.02, Safari 6.0.2
Navegadores móviles
Firefox (Gecko) 32, Chrome 3, Opera* 11.5, Safari 6.1
Nota: el método readAsBinaryString() está en desuso y se debe utilizar readAsArrayBuffer() en su lugar.
