Oto moja forma HTML:
<form name="myForm" ng-submit="">
<input ng-model='file' type="file"/>
<input type="submit" value='Submit'/>
</form>
Chcę załadować obraz z komputera lokalnego i chcę przeczytać zawartość przesłanego pliku. Wszystko to chcę zrobić za pomocą AngularJS.
Kiedy próbuję wydrukować, jego wartość $scope.file
jest nieokreślona.
angularjs
angularjs-fileupload
Aditya Sethi
źródło
źródło
Odpowiedzi:
Niektóre odpowiedzi tutaj proponują użycie
FormData()
, ale niestety jest to obiekt przeglądarki niedostępny w Internet Explorerze 9 i niższych. Jeśli potrzebujesz obsługi tych starszych przeglądarek, potrzebujesz strategii tworzenia kopii zapasowych, takiej jak przy użyciu<iframe>
lub Flash.Istnieje już wiele modułów Angular.js do przesyłania plików. Te dwa mają wyraźne wsparcie dla starszych przeglądarek:
I kilka innych opcji:
Jeden z nich powinien pasować do twojego projektu lub może dać ci wgląd w to, jak samemu go zakodować.
źródło
Najłatwiej jest użyć interfejsu API HTML5, a mianowicie
FileReader
HTML jest dość prosty:
W kontrolerze zdefiniuj metodę „dodaj”:
Kompatybilność z przeglądarkami
Przeglądarki stacjonarne
Przeglądarki mobilne
Uwaga: metoda readAsBinaryString () jest przestarzała i zamiast niej należy użyć metody readAsArrayBuffer () .
źródło
onloadend
funkcji wywołania zwrotnego. Nie potrzebujesz żadnej biblioteki, aby korzystać z tego API, jest już w przeglądarce (chyba że używasz bardzo starej). Mam nadzieję że to pomoże.readAsArrayBuffer
metody FileReaderSync (która jest dostępna tylko w robotach sieciowych) zamiast zwykłego, asynchronicznego interfejsu API FileReader ?Jest to nowoczesny sposób przeglądarki, bez bibliotek stron trzecich. Działa na wszystkich najnowszych przeglądarkach.
HTML:
PHP:
js fiddle (tylko front-end) https://jsfiddle.net/vince123/8d18tsey/31/
źródło
ng-submit
lub formularza? To samo z siebie nic nie robiPoniżej znajduje się przykładowy przykład przesłania pliku:
http://jsfiddle.net/vishalvasani/4hqVu/
W tej jednej funkcji o nazwie
Z widoku, który zaktualizuje tablicę plików w kontrolerze
lub
Możesz sprawdzić przesyłanie plików jQuery za pomocą AngularJS
http://blueimp.github.io/jQuery-File-Upload/angularjs.html
źródło
Można osiągnąć piękny plik i folder przesyłać za pomocą flow.js .
https://github.com/flowjs/ng-flow
Sprawdź demo tutaj
http://flowjs.github.io/ng-flow/
Nie obsługuje IE7, IE8, IE9, więc w końcu będziesz musiał użyć warstwy kompatybilności
https://github.com/flowjs/fusty-flow.js
źródło
Użyj
onchange
zdarzenia, aby przekazać element pliku wejściowego do funkcji.<input type="file" onchange="angular.element(this).scope().fileSelected(this)" />
Tak więc, gdy użytkownik wybiera plik, masz do niego odniesienie, bez konieczności klikania przycisku „Dodaj” lub „Prześlij”.
źródło
Wypróbowałem wszystkie alternatywy, które daje @Anoyz (poprawna odpowiedź) ... a najlepszym rozwiązaniem jest https://github.com/danialfarid/angular-file-upload
Niektóre funkcje:
Dla mnie działa dobrze. Musisz tylko zwrócić uwagę na instrukcje.
Po stronie serwera używam oprogramowania pośredniego NodeJs, Express 4 i Multer do zarządzania żądaniami wieloczęściowymi.
źródło
nlzt9LJWRrAZEO3ZteZUOgGc
ale bez formatu .png. Jak to dodać?HTML
Skrypty
źródło
<input type=file>
Element nie domyślnie pracy z dyrektywą ng-modelu . Potrzebuje niestandardowej dyrektywy :Demonstracja robocza
select-ng-files
dyrektywy, która działa zng-model
1$http.post
z listy plikówPodczas wysyłania testu POST z obiektem File należy ustawić
'Content-Type': undefined
. Metoda wysyłania XHR wykryje wówczas obiekt File i automatycznie ustawi typ zawartości.źródło
Łatwe dzięki dyrektywie
HTML:
JS:
W dyrektywie zapewniamy utworzenie nowego zakresu, a następnie nasłuchujemy zmian wprowadzonych w elemencie wejściowym pliku. Po wykryciu zmian emituj zdarzenie do wszystkich zakresów przodków (w górę) z obiektem pliku jako parametrem.
W twoim kontrolerze:
Następnie w wywołaniu ajax:
http://shazwazza.com/post/uploading-files-and-json-data-in-the-same-request-with-angular-js/
źródło
myślę, że jest to przesyłanie pliku kątowego:
przesyłanie pliku ng
Lekka dyrektywa Angular JS do przesyłania plików.
Oto DEMO page.Features
https://github.com/danialfarid/ng-file-upload
źródło
Przesyłanie pliku i danych json w tym samym czasie.
źródło
Możesz użyć
FormData
obiektu, który jest bezpieczny i szybki:źródło
<input type="file" ng-change="contentChanged($event)">
, jak to zrobić?http://jsfiddle.net/vishalvasani/4hqVu/ działa dobrze w Chrome i IE (jeśli zaktualizujesz CSS trochę w obrazie tła). Służy to do aktualizacji paska postępu:
ale w FireFox dane [procentowe] programu angular nie zostały pomyślnie zaktualizowane w DOM, chociaż pliki są ładowane pomyślnie.
źródło
load
zdarzenie, a jeśli długość można obliczyć, uruchom zdarzenie postępu, aby wskazać pomyślne przesłanie. Github.com/danialfarid/angular-file-upload już się tym zajmuje.Możesz rozważyć IaaS do przesyłania plików, na przykład Uploadcare . Jest do tego pakiet Angular: https://github.com/uploadcare/angular-uploadcare
Technicznie jest on implementowany jako dyrektywa, zapewniając różne opcje przesyłania i manipulowania przesłanymi obrazami w widżecie:
Więcej opcji konfiguracji do zabawy: https://uploadcare.com/widget/configure/
źródło
Wiem, że to późny wpis, ale stworzyłem prostą dyrektywę przesyłania. Które możesz zacząć pracować w mgnieniu oka!
ng-simple-upload więcej na Github na przykładzie z interfejsem API sieci Web.
źródło
HTML
dodaj metodę „profileimage ()” do kontrolera
źródło
To powinna być aktualizacja / komentarz do odpowiedzi @ jquery-guru, ale ponieważ nie mam wystarczającej liczby powtórzeń, trafi tutaj. Naprawia błędy, które są teraz generowane przez kod.
https://jsfiddle.net/vzhrqotw/
Zmiana polega zasadniczo na:
Do:
W razie potrzeby możesz przenieść się w bardziej odpowiednie miejsce.
źródło
Przeczytałem cały wątek, a interfejs API HTML5 wyglądał najlepiej. Ale zmienia moje pliki binarne, niszcząc je w sposób, którego nie zbadałem. Idealnym rozwiązaniem dla mnie było:
HTML:
JS:
Po stronie serwera (PHP):
źródło
Jestem w stanie przesyłać pliki za pomocą AngularJS, używając poniższego kodu:
The
file
Do argumentu, że musi zostać przekazany do funkcjingUploadFileUpload
jest$scope.file
jak na swoje pytanie.Kluczową kwestią jest tutaj użycie
transformRequest: []
. Zapobiegnie to $ http z bałaganem z zawartością pliku.źródło
Powyższa odpowiedź nie jest kompatybilna z przeglądarką. Jeśli ktoś ma problem ze zgodnością, spróbuj tego.
Skrzypce
Wyświetl kod
Kod kontrolera
źródło
w prostych słowach
w HTML - dodaj tylko poniższy kod
w kontrolerze - Ta funkcja jest wywoływana po kliknięciu przycisku „Prześlij plik” . prześle plik. możesz to pocieszyć.
dodaj więcej w kontrolerach - poniżej kodu dodaj do funkcji. Ta funkcja jest wywoływana po kliknięciu przycisku „Uderzenie w API (POST)” . wyśle plik (który przesłał) i dane formularza do backendu.
w tym przypadku .. dodałem poniższy kod jako dane formularza
źródło
W sterowniku angularJS
źródło
Użyliśmy HTML, CSS i AngularJS. Poniższy przykład pokazuje, jak przesłać plik za pomocą AngularJS.
źródło
Przykład roboczy z użyciem prostej dyrektywy ( model pliku ng ):
i użyj,
FormData
aby przesłać plik w swojej funkcji.wszystkie kredyty dotyczą https://github.com/mistralworks/ng-file-model
Napotkałem mały problem, który możesz sprawdzić tutaj: https://github.com/mistralworks/ng-file-model/issues/7
Wreszcie, oto rozwidlone repozytorium: https://github.com/okasha93/ng-file-model/blob/patch-1/ng-file-model.js
źródło
Kod pomoże wstawić plik
insert.js
save_data.php
źródło
to działa
plik.html
controller.js
fileupload.php
źródło
PRZEŚLIJ PLIKI
POBIERZ PLIKI:
źródło
źródło