Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
Reply to this topicStart new topic
> [PHP][JavaScript] Upload obrazków AJAX
Czikusek
post 12.08.2018, 14:06:48
Post #1





Grupa: Zarejestrowani
Postów: 30
Pomógł: 1
Dołączył: 11.07.2018

Ostrzeżenie: (0%)
-----


Przerabiam skrypt uploadu obrazków PHP + jQuery (ajax) i w związku z tym mam kilka pytań:

1) mam takie coś:
  1. // Add events
  2. $('input[type=file]').on('change', prepareUpload);
  3. $('form').on('submit', uploadFiles);


i teraz po wybraniu obrazka skrypt wywołuje funkcję prepareUpload

  1. // Grab the files and set them to our variable
  2. function prepareUpload(event)
  3. {
  4. files = event.target.files;
  5. }


i teraz po wybraniu obrazka skrypt i kliknięciu submit, skrypt wywołuje funkcję uploadFiles, która AJAXem wysyła do skryptu PHP informacje z formularza tj. z pola input[type="file"]

  1. function uploadFiles(event)
  2. {
  3. event.stopPropagation(); // Stop stuff happening
  4. event.preventDefault(); // Totally stop stuff happening
  5.  
  6. files = event.target.files;
  7.  
  8. // START A LOADING SPINNER HERE
  9.  
  10. // Create a formdata object and add the files
  11. var data = new FormData();
  12. $.each(files, function(key, value)
  13. {
  14. data.append(key, value);
  15. });
  16.  
  17. $.ajax({
  18. url: './submit.php?files',
  19. type: 'POST',
  20. data: data,
  21. cache: false,
  22. dataType: 'json',
  23. processData: false, // Don't process the files
  24. contentType: false, // Set content type to false as jQuery will tell the server its a query string request
  25. success: function(data, textStatus, jqXHR)
  26. {
  27. if(typeof data.error === 'undefined')
  28. {
  29. // Success so call function to process the form
  30. submitForm(event, data);
  31. }
  32. else
  33. {
  34. // Handle errors here
  35. console.log('ERRORS: ' + data.error);
  36. }
  37. },
  38. error: function(jqXHR, textStatus, errorThrown)
  39. {
  40. // Handle errors here
  41. console.log('ERRORS: ' + textStatus);
  42. // STOP LOADING SPINNER
  43. }
  44. });
  45. }


i pytanie jest następujące - jak zrobić, żeby po wybraniu obrazka skrypt automatycznie go uploadował? żeby pominąć to on 'submit' a dać to w on 'change'. Podmieniłem nazwy funkcji ale nie działa upload wtedy - nie przesyła pliku. Jak połączyć te funkcje?


f5
Go to the top of the page
+Quote Post

Reply to this topicStart new topic
1 Użytkowników czyta ten temat (1 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 



RSS Wersja Lo-Fi Aktualny czas: 19.04.2024 - 13:37