Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [AJAX]Upload plików + tekst z inputów
Forum PHP.pl > Forum > XML, AJAX > AJAX
goukan
Witam, mam problem ze stworzeniem formularza który będzie wysyłał plik na serwer oraz dane metodą post. Czytałem już chyba wszystko z internetu i nic nie pomaga;/
Kompletnie nie wiem jak to zrobić. Mój formularz wygląda tak:
  1. <form id="offerForm" action="#" method="post" enctype="multipart/form-data">
  2. <div>
  3. <select name="offer_gatunek" id="offer_gatunek" class="form-poshytip" title="Wybierz gatunek oferty.">
  4. <option>Torty</option>
  5. <option>Ciasteczka</option>
  6. <option>Ciasta</option>
  7. </select>
  8. <label>Wybierz gatunek</label>
  9. </div>
  10. <div>
  11. <input name="name" type="file" id="offer_image" class="form-poshytip" title="Wybierz obrazek do oferty." />
  12. <label>Obrazek oferty</label>
  13. </div>
  14. <div>
  15. <input name="name" id="offer_name" type="text" class="form-poshytip" title="Wpisz nazwę oferty." />
  16. <label>Nazwa oferty</label>
  17. </div>
  18. <div>
  19. <textarea name="comments" id="offer_text" rows="5" cols="20" class="form-poshytip" title="Wpisz treść oferty"></textarea>
  20. </div>
  21. <input type="hidden" value="add_offer.php" name="send_offer_form" id="send_offer_form" />
  22. <p><input type="button" value="Dodaj" name="submit" id="offer_submit" /> <span id="offer_error" class="warning">Message</span></p>
  23. </form>

mam tu nazwy i jeden input typu file, który chce wysłać ajaxem na serwer.
mój plik js aktualnie wygląda tak: (z nazwami sobie poradziłem i wysyłają się postem, jednak post obrazka to C:/fakepath, więc nie działa prawidłowo)
  1. $(document).ready(function(){
  2.  
  3. // hide messages
  4. $("#offer_error").hide();
  5. $("#offer_success").hide();
  6.  
  7. // on submit...
  8. $("#offerForm #offer_submit").click(function() {
  9. $("#offer_error").hide();
  10.  
  11. //required:
  12.  
  13. //offer_gatunek
  14. var gatunek = $("select#offer_gatunek").val();
  15. if(gatunek == ""){
  16. $("#offer_error").fadeIn().text("Wybierz gatunek oferty.");
  17. $("select#offer_gatunek").focus();
  18. return false;
  19. }
  20.  
  21. //offer_image
  22.  
  23. var image = $("input#offer_image").val();
  24. if(image == ""){
  25. $("#offer_error").fadeIn().text("Wybierz obrazek do oferty.");
  26. $("input#offer_image").focus();
  27. return false;
  28. }
  29.  
  30. //offer_name
  31. var name = $("input#offer_name").val();
  32. if(name == ""){
  33. $("#offer_error").fadeIn().text("Wpisz nazwę oferty.");
  34. $("input#offer_name").focus();
  35. return false;
  36. }
  37.  
  38. // offer_text
  39. var text = $("textarea#offer_text").val();
  40. if(text == ""){
  41. $("#offer_error").fadeIn().text("Wpisz treść oferty.");
  42. $("textarea#offer_text").focus();
  43. return false;
  44. }
  45.  
  46. // send mail php
  47. var sendMailUrl = $("#send_offer_form").val();
  48.  
  49. // data string
  50. var dataString = 'offer_name='+ name
  51. + '&offer_text=' + text
  52. + '&offer_image=' + image
  53. + '&offer_gatunek=' + gatunek;
  54.  
  55. // ajax
  56. $.ajax({
  57. type:"POST",
  58. url: sendMailUrl,
  59. data: dataString,
  60. success: success()
  61. });
  62. });
  63.  
  64. // on success...
  65. function success(){
  66. $("#offer_success").fadeIn();
  67. $("#offerForm").fadeOut();
  68. }
  69.  
  70. return false;
  71. });
  72.  
Damonsson
http://stackoverflow.com/questions/1089938...form-using-ajax

To powinno zadziałać. Szukaj przykładów gdzie jest w kodzie "new FormData()", bo to na 100% działa, sam używałem.
goukan
działa, dzięki smile.gif)
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2024 Invision Power Services, Inc.