Czy mogę użyć następującego kodu jQuery do przesłania pliku przy użyciu metody POST żądania ajax?
$.ajax({
type: "POST",
timeout: 50000,
url: url,
data: dataString,
success: function (data) {
alert('success');
return false;
}
});
Jeśli to możliwe, czy muszę wypełnić data
część? Czy to właściwy sposób? Wysyłam plik tylko po stronie serwera.
Gogłem się w kółko, ale znalazłem wtyczkę, ale w swoim planie nie chcę jej używać. Przynajmniej na razie.
javascript
jquery
ajax
post
file-upload
Willy
źródło
źródło
Odpowiedzi:
Przesyłanie pliku
niejest możliwe za pośrednictwem AJAX.Możesz przesłać plik bez odświeżania strony za pomocą
IFrame
.Możesz sprawdzić dalsze szczegóły tutaj .
AKTUALIZACJA
W XHR2 obsługiwane jest przesyłanie plików przez AJAX. Np. Przez
FormData
obiekt, ale niestety nie jest obsługiwany przez wszystkie / stare przeglądarki.FormData
Wsparcie zaczyna się od następujących wersji przeglądarek na komputery.Aby uzyskać więcej informacji, zobacz łącze MDN .
źródło
enctype
na"form/multipart"
!Ramki iframe nie są już potrzebne do przesyłania plików przez ajax. Ostatnio zrobiłem to sam. Sprawdź te strony:
Korzystanie z przesyłania plików HTML5 z AJAX i jQuery
http://dev.w3.org/2006/webapi/FileAPI/#FileReader-interface
Zaktualizowałem odpowiedź i wyczyściłem ją. Użyj funkcji getSize, aby sprawdzić rozmiar, lub użyj funkcji getType, aby sprawdzić typy. Dodano kod HTML i css paska postępu.
Jak korzystać z klasy Upload
Kod HTML paska postępu
Kod css paska postępu
źródło
writer(catchFile)
. Co to jestwriter()
?Możliwe jest przesyłanie i przesyłanie pliku Ajax. Używam
jQuery $.ajax
funkcji do ładowania plików. Próbowałem użyć obiektu XHR, ale nie mogłem uzyskać wyników po stronie serwera za pomocą PHP.Jak widać, należy utworzyć obiekt FormData, pusty lub z (zserializowany? -
$('#yourForm').serialize())
istniejący formularz, a następnie dołączyć plik wejściowy.Oto więcej informacji: - Jak przesłać plik przy użyciu jQuery.ajax i FormData - Przesyłanie plików przez jQuery, obiekt FormData jest podany i nie ma nazwy pliku, żądanie GET
Do procesu PHP możesz użyć czegoś takiego:
źródło
formData.append('file', $('#file')[0].files[0]);
zwracaundefined
iconsole.log(formData)
nie ma nic oprócz_proto_
var formData = new FormData(); formData.append('file', document.getElementById('file').files[0]); $.ajax({ url : $("form[name='uploadPhoto']").attr("action"), type : 'POST', data : formData, processData: false, // tell jQuery not to process the data contentType: false, // tell jQuery not to set contentType success : function(data) { console.log(data); alert(data); } });
Prosty formularz przesyłania
źródło
Spóźniłem się na to, ale szukałem rozwiązania do przesyłania obrazów opartego na ajax, a odpowiedź, której szukałem, była trochę rozproszona w tym poście. Rozwiązanie, na którym się zdecydowałem, dotyczyło obiektu FormData. Złożyłem podstawową formę kodu, który skompletowałem. Możesz zobaczyć, jak pokazuje, jak dodać niestandardowe pole do formularza za pomocą fd.append (), a także jak obsługiwać dane odpowiedzi po zakończeniu żądania ajax.
Prześlij html:
Jeśli pracujesz z php, oto sposób obsługi przesyłania, który obejmuje wykorzystanie obu pól niestandardowych pokazanych w powyższym HTML.
Upload.php
źródło
Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https,
dlaczego jest to tak sir skopiować wkleić kod, jak to jestfile://
, a nie za pomocą serwera WWW? Nawiasem mówiąc, nie jest najlepszą praktyką po prostu kopiowanie i wklejanie kodu na ślepo bez uprzedniego zrozumienia. Polecam przejrzenie kodu wiersz po wierszu, aby zrozumieć, co się dzieje przed użyciem kodu.Przesyłanie AJAX jest rzeczywiście możliwe przy pomocy
XMLHttpRequest()
. Nie są wymagane iframe. Postęp przesyłania można wyświetlić.Aby uzyskać szczegółowe informacje, patrz: Odpowiedz https://stackoverflow.com/a/4943774/873282, aby zakwestionować postęp przesyłania jQuery i przesyłanie pliku AJAX .
źródło
Oto jak to działa:
HTML
JS
PHP
źródło
$('#file')[0].files[0]
dziwne obejście JS bez konieczności odpowiedniego<form>
Jeśli chcesz to zrobić w ten sposób:
niż
https://github.com/lgersman/jquery.orangevolt-ampere/blob/master/src/jquery.upload.js
może być twoim rozwiązaniem.
źródło
Więcej szczegółów na moim blogu: http://blog.manki.in/2011/08/ajax-fie-upload.html .
źródło
edycja: Uwaga rodzaj treści i dane procesowe Możesz tego użyć do przesłania plików przez Ajax ...... przesłanie danych wejściowych nie może być poza elementem formularza :)
źródło
Aktualizacja 2019:
HTML
js
views.py
źródło
Użyj FormData. Działa naprawdę dobrze :-) ...
źródło
Zaimplementowałem opcję wyboru wielu plików z natychmiastowym podglądem i przesyłaniem po usunięciu niechcianych plików z podglądu za pośrednictwem ajax.
Szczegółową dokumentację można znaleźć tutaj: http://anasthecoder.blogspot.ae/2014/12/multi-file-select-preview-without.html
Demo: http://jsfiddle.net/anas/6v8Kz/7/embedded/result/
jsFiddle: http://jsfiddle.net/anas/6v8Kz/7/
JavaScript:
źródło
Poradziłem sobie z nimi w prostym kodzie. Możesz pobrać działającą wersję demo tutaj
W twoim przypadku są to bardzo możliwe. Pokażę ci krok po kroku, jak możesz wgrać plik na serwer za pomocą jQuery AJAX.
Najpierw stwórzmy plik HTML, aby dodać następujący element pliku formularza, jak pokazano poniżej.
Po drugie, utwórz plik jquery.js i dodaj następujący kod, aby obsłużyć nasze przesyłanie plików na serwer
Gotowe. Zobacz więcej
źródło
Korzystanie z FormData to droga, na którą wskazuje wiele odpowiedzi. oto trochę kodu, który działa świetnie w tym celu. Zgadzam się również z komentarzem dotyczącym zagnieżdżania bloków ajax w celu spełnienia złożonych okoliczności. Dołączając e.PreventDefault (); z mojego doświadczenia wynika, że kod jest bardziej kompatybilny z różnymi przeglądarkami.
źródło
Używanie czystego js jest łatwiejsze
Oto bardziej rozwinięty fragment kodu z obsługą błędów i dodatkowym wysyłaniem plików Json
Pokaż fragment kodu
źródło
Tak, możesz po prostu użyć javascript, aby uzyskać plik, upewniając się, że czytasz plik jako adres URL danych. Przetwarzaj rzeczy przed base64, aby faktycznie pobrać dane zakodowane w standardzie 64, a następnie, jeśli używasz php lub dowolnego języka zaplecza, możesz zdekodować dane w bazie 64 i zapisać w pliku, jak pokazano poniżej
Oczywiście prawdopodobnie będziesz chciał przeprowadzić pewną weryfikację, na przykład sprawdzić, z jakim typem pliku masz do czynienia i takie tam, ale taki jest pomysł.
źródło
źródło
Możesz użyć metody ajaxSubmit w następujący sposób :) po wybraniu pliku, który wymaga przesłania na serwer, prześlij go na serwer :)
źródło
aby przesłać plik przesłany przez użytkownika jako część formularza za pomocą jquery, postępuj zgodnie z poniższym kodem:
Następnie wyślij obiekt danych formularza na serwer.
Możemy również dołączyć plik lub obiekt Blob bezpośrednio do obiektu FormData.
źródło
Jeśli chcesz przesłać plik za pomocą AJAX, oto kod, którego możesz użyć do przesłania pliku.
Oto kod HTML do przesłania pliku
źródło
Aby uzyskać wszystkie dane wejściowe formularza, w tym typ = "plik" , musisz użyć obiektu FormData . po przesłaniu formularza zobaczysz zawartość formData w debuggerze -> sieć -> Nagłówki .
źródło
źródło
Oto pomysł, o którym myślałem:
Mają formę, w której przenosisz element INPUT: File.
Wynik zostanie opublikowany w ramce, a następnie możesz po prostu wysłać pobrane dane na wyższy poziom do wybranego znacznika obrazu za pomocą czegoś takiego:
i strona się ładuje.
Wierzę, że to działa dla mnie i zależnie od tego możesz zrobić coś takiego:
źródło