Tiedoston lataaminen AngularJS:n avulla

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.

georgeawg
Muokattu kysymysT00 kesäkuu 2018 в 2:13
Ohjelmointi
angularjs angularjs-fileupload
T00 syyskuu 2013 в 10:29
15 näkymät
Ratkaisu

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.

Anoyz
Muokattu vastausta T11 joulukuu 2015 в 11:20
Kommentit (8)

Alla on esimerkki tiedoston lataamisesta:

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

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: ää.

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

Kommentit (7)

[http://jsfiddle.net/vishalvasani/4hqVu/](http://jsfiddle.net/vishalvasani/4hqVu/) 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.

Kommentit (7)