Aqui está o meu formulário HTML:
<form name="myForm" ng-submit="">
<input ng-model='file' type="file"/>
<input type="submit" value='Submit'/>
</form>
Eu quero carregar uma imagem da máquina local e quero ler o conteúdo do arquivo carregado. Tudo isso eu quero fazer usando o AngularJS.
Quando eu tento imprimir o valor de $scope.file
ele vem como indefinido.
Algumas das respostas aqui propõem utilizar FormData()
, mas infelizmente esse é um objeto de browser não disponível no Internet Explorer 9 e abaixo. Se você precisa suportar esses navegadores mais antigos, você precisará de uma estratégia de backup como utilizar <iframe>
ou Flash.
Já existem muitos módulos Angular.js para realizar o upload de arquivos. Estes dois têm suporte explícito para navegadores mais antigos:
E algumas outras opções:
Uma delas deve se encaixar no seu projeto, ou pode lhe dar alguma visão de como codificá-lo você mesmo.
Abaixo está um exemplo de trabalho de upload de arquivo:
Nesta única função chamada
setFiles
From View que irá actualizar a matriz de ficheiros no controlador
ou
Você pode verificar jQuery File Upload usando AngularJS
[
]() funciona bem em cromo e IE (se você atualizar o CSS um pouco na imagem de fundo). Isto é usado para atualizar a barra de progresso: scope.progress = Math.round(evt.loaded * 100 / evt.total)
mas no FireFox angular's [por cento] os dados não são atualizados no DOM com sucesso, embora os arquivos estejam sendo carregados com sucesso.