Mai mult
Fișier de Încărcare, folosind AngularJS
Aici este meu de formular HTML:
<form name="myForm" ng-submit="">
<input ng-model='file' type="file"/>
<input type="submit" value='Submit'/>
</form>
Vreau să încărcați o imagine din computer și doriți să citiți conținutul fișierului încărcat. Toate astea vreau să fac folosind AngularJS.
Când m-am încercați să imprimați valoare de $domeniul de aplicare.fișier
e de nedefinit.
291
29
Unele dintre răspunsurile de aici propun folosirea
FormData()
, dar, din păcate, că este un browser obiect nu este disponibil în Internet Explorer 9 și mai jos. Dacă aveți nevoie pentru a sprijini cele mai vechi browsere, veți avea nevoie de o strategie de backup, cum ar fi utilizarea<iframe>
sau Flash.Există deja multe Angular.js module pentru a efectua fișier încărcarea. Aceste două au un sprijin explicit pentru browsere mai vechi:
Și alte câteva opțiuni:
Unul dintre acestea ar trebui să se potrivi proiectul dumneavoastră, sau poate da o idee despre cum să cod singur.
Cel mai simplu este de a folosi HTML5 API, și anume [
FileReader
][1]HTML este destul de simplă:
În controlerul defini 'adăugați' metoda:
Compatibilitate Browser-Ul
Browserele Desktop
Browsere Mobile
Notă : readAsBinaryString() metodă este învechită și readAsArrayBuffer() ar trebui să fie folosit în loc.
Acest lucru este browser-ul modern, fără biblioteci 3rd party. Funcționează pe toate cele mai recente browsere.
HTML:
PHP:
<?php
js vioara (doar front-end) https://jsfiddle.net/vince123/8d18tsey/31/
Mai jos este de lucru exemplu de fișier de încărcare:
http://jsfiddle.net/vishalvasani/4hqVu/
În aceasta funcție numită
De Vedere, care va actualiza fișierul matrice în controller
sau
Puteți verifica jQuery File Upload folosind AngularJS
http://blueimp.github.io/jQuery-File-Upload/angularjs.html
Puteți obține frumos fișier și folder incarca folosind flow.js.
https://github.com/flowjs/ng-flow
Check out un demo aici
http://flowjs.github.io/ng-flow/
Nu't suport IE7, IE8, IE9, deci'll în cele din urmă trebuie să utilizați un strat de compatibilitate
https://github.com/flowjs/fusty-flow.js
Folosi `onchange event pentru a trece la fișierul de intrare element de funcție.
<input type="fișier" onchange="unghiulare.element(acest lucru).domeniul de aplicare().fileSelected(acest lucru)" />
Deci, atunci când un utilizator selectează un fișier, aveți o referință la acesta, fără ca utilizatorul să faceți clic pe o "Adăugați" sau "Încărcați" buton.
Am încercat toate alternativele care @Anoyz (răspunsul Corect) dă... și cea mai bună soluție este https://github.com/danialfarid/angular-file-upload
Unele Caracteristici:
L's de lucru bine pentru mine. Trebuie doar să acorde o atenție la instrucțiuni.
În server-side folosesc NodeJs, Express 4 și Multer middleware pentru a gestiona mai multe cereri.
De `<input type=file> element nu în mod implicit lucra cu ng-model directive. Este nevoie de o custom directive:
Demo de lucru de
return-fișierele Directiva care Funcționează cu
ng-model`1$http.post
la o FileListCând trimiteți un MESAJ cu o [Fișier obiect][Fișier], este important să se stabilească
'Content-Type': nedefinit
. De XHR trimite metoda apoi va detecta [Fișier obiect][Fișier] și setează automat tipul de conținut.HTML
Script-uri
Ușor cu un directiva
Html:
JS:
cred că acest lucru este angular file upload:
ng-file-incarca
Ușor JS Unghiulare directivă pentru a încărca fișiere.
Aici este DEMO pagina.Caracteristici
https://github.com/danialfarid/ng-file-upload
Fișierul dvs. și date json încărcarea în același timp .
Puteți utiliza o
FormData
obiect care este în condiții de siguranță și rapid:[http://jsfiddle.net/vishalvasani/4hqVu/](http://jsfiddle.net/vishalvasani/4hqVu/) funcționează bine în chrome și IE (dacă actualizați CSS puțin în background-image). Acest lucru este folosit pentru actualizarea bara de progres:
dar în FireFox unghiular's [la suta] date nu este actualizată în DOM cu succes,deși fișierele sunt încărcați cu succes.
Știu că aceasta este o intrare târziu, dar am creat o încărcare simplă directivă. Pe care le puteți obține de lucru în cel mai scurt timp!
ng-simplu-upload mai mult pe Github cu un exemplu folosind API-ul Web.
Puteți lua în considerare IaaS pentru upload de fișiere, cum ar fi Uploadcare. Există o Unghiular pachet pentru ea: https://github.com/uploadcare/angular-uploadcare
Din punct de vedere tehnic it's implementată ca o directivă, care oferă diferite opțiuni pentru a încărca, și manipulări pentru imaginile încărcate în widget:
Mai multe opțiuni de configurare pentru a juca cu: https://uploadcare.com/widget/configure/
HTML
adăugați 'profileimage()' metoda la controler
Acest lucru ar trebui să fie o actualizare/comentariu la @jquery-guru's-a raspuns dar ca eu nu't au suficient de reprezentant se va merge aici. Se remediază erorile care sunt acum generate de cod.
https://jsfiddle.net/vzhrqotw/
Schimbarea este de fapt:
A:
Simțiți-vă liber pentru a trece la o locație mai potrivită, dacă se dorește.
Am'am citit tot thread și HTML5 API soluție părea mai bun. Dar îmi schimbă fișiere binare, coruperea acestora într-o manieră m-am'nu am investigat. Soluția care a lucrat perfect pentru mine a fost :
HTML :
JS:
Partea de Server (PHP):
Sunt capabil de a încărca fișiere folosind AngularJS prin utilizarea de cod de mai jos:
La "dosar" pentru argumentul că trebuie să fi trecut pentru funcția de
ngUploadFileUpload "este" $domeniul de aplicare.fișier
ca pe o întrebare.Punctul cheie aici este de a utiliza
transformRequest: []
. Acest lucru va preveni $http joace cu conținutul fișierului.