Failų įkėlimas naudojant AngularJS

Čia yra mano HTML forma:

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

Noriu įkelti paveikslėlį iš vietinio kompiuterio ir perskaityti įkelto failo turinį. Visa tai noriu atlikti naudodamas AngularJS.

Kai bandau atspausdinti $scope.file reikšmę, ji gaunama kaip neapibrėžta.

Sprendimas

Kai kuriuose atsakymuose siūloma naudoti FormData(), bet, deja, tai yra naršyklės objektas, kurio nėra "Internet Explorer 9" ir vėlesnėse versijose. Jei reikia palaikyti šias senesnes naršykles, reikės atsarginės strategijos, pavyzdžiui, naudoti <iframe> arba "Flash".

Jau yra daug Angular.js modulių, skirtų failų įkėlimui atlikti. Šie du turi aiškų senesnių naršyklių palaikymą:

Ir keletas kitų parinkčių:

Vienas iš jų turėtų tikti jūsų projektui arba gali padėti jums sužinoti, kaip jį suprogramuoti patiems.

Komentarai (8)

Toliau pateikiamas darbinis failo įkėlimo pavyzdys:

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

Šioje vienoje funkcijoje, vadinamoje

setFiles

Iš View, kuri atnaujins failų masyvą valdiklyje

arba

Galite patikrinti jQuery File Upload naudojant AngularJS

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

Komentarai (7)

[http://jsfiddle.net/vishalvasani/4hqVu/](http://jsfiddle.net/vishalvasani/4hqVu/) puikiai veikia "Chrome" ir IE (jei šiek tiek atnaujinsite CSS fono paveikslėlyje). Tai naudojama atnaujinant progreso juostą:

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

tačiau "FireFox" angular's [procentai] duomenys DOM'e nėra sėkmingai atnaujinami, nors failai įkeliami sėkmingai.

Komentarai (7)