Caricamento di file usando AngularJS

Ecco il mio modulo HTML:

<form name="myForm" ng-submit="">
    <input ng-model='file' type="file"/>
    <input type="submit" value='Submit'/>
</form>

Voglio caricare un'immagine dalla macchina locale e voglio leggere il contenuto del file caricato. Tutto questo voglio farlo usando AngularJS.

Quando provo a stampare il valore di $scope.file viene come undefined.

georgeawg
Domanda modificata 11º giugno 2018 в 2:13
Programmazione
angularjs angularjs-fileupload
2º settembre 2013 в 10:29
17 visualizzazioni
Soluzione

Alcune delle risposte qui propongono di usare FormData(), ma sfortunatamente questo è un oggetto del browser non disponibile in Internet Explorer 9 e inferiori. Se hai bisogno di supportare quei vecchi browser, avrai bisogno di una strategia di backup come l'utilizzo di <iframe> o Flash.

Ci sono già molti moduli Angular.js per eseguire il caricamento dei file. Questi due hanno un supporto esplicito per i vecchi browser:

E alcune altre opzioni:

Uno di questi dovrebbe essere adatto al tuo progetto, o potrebbe darti qualche idea su come codificarlo da solo.

Anoyz
Risposta modificata 22º dicembre 2015 в 11:20
Commentari (8)

Qui sotto c'è un esempio funzionante di caricamento di file:

http://jsfiddle.net/vishalvasani/4hqVu/

In questa funzione chiamata

setFiles

From View che aggiornerà l'array di file nel controller

o

Puoi controllare jQuery File Upload usando AngularJS

http://blueimp.github.io/jQuery-File-Upload/angularjs.html

Commentari (7)

[http://jsfiddle.net/vishalvasani/4hqVu/](http://jsfiddle.net/vishalvasani/4hqVu/) funziona bene in chrome e IE (se si aggiorna un po' il CSS in background-image). Questo è usato per aggiornare la barra di avanzamento:

 scope.progress = Math.round(evt.loaded * 100 / evt.total)

ma in FireFox i dati [percent] di Angular non vengono aggiornati con successo nel DOM, anche se i file vengono caricati con successo.

Commentari (7)