Tässä on HTML-lomakkeeni:
<form name="myForm" ng-submit="">
<input ng-model='file' type="file"/>
<input type="submit" value='Submit'/>
</form>
Haluan ladata kuvan paikalliselta koneelta ja haluan lukea ladatun tiedoston sisällön. Kaiken tämän haluan tehdä AngularJS:n avulla.
Kun yritän tulostaa $scope.file
:n arvon, tuloksena on undefined.
Joissakin vastauksissa ehdotetaan FormData()
:n käyttämistä, mutta valitettavasti se on selainobjekti, joka ei ole käytettävissä Internet Explorer 9:ssä ja sitä uudemmissa versioissa. Jos sinun on tuettava näitä vanhempia selaimia, tarvitset varastrategian, kuten <iframe>
tai Flashin käytön.
On jo olemassa monia Angular.js-moduuleja tiedostojen lataamiseen. Näissä kahdessa on nimenomainen tuki vanhemmille selaimille:
Ja joitakin muita vaihtoehtoja:
Jonkin näistä pitäisi sopia projektiisi, tai se voi antaa sinulle tietoa siitä, miten voit koodata sen itse.
Alla on esimerkki tiedoston lataamisesta:
Tässä yksi funktio nimeltä
setFiles
Näkymästä, joka päivittää tiedostomäärän ohjaimessa.
tai
Voit tarkistaa jQuery File Upload käyttäen AngularJS: ää.
[
]() toimii hyvin chromessa ja IE:ssä (jos päivität CSS:ää hieman background-image-kohdassa). Tätä käytetään edistymispalkin päivittämiseen: scope.progress = Math.round(evt.loaded * 100 / evt.total)
mutta FireFoxissa angular's [percent] -tiedot eivät päivity DOMiin onnistuneesti, vaikka tiedostojen lataus onnistuu.