jQuery Prześlij formularz, jeśli zmienisz wartość wejściową

Question

Używam wtyczki jquery.form, działa i działa dobrze , ale po zmianie wartości wejściowej ... jest przesyłana poprawnie! ale przekierowanie mnie do mojego pliku uploader.php, nie chcę przekierować mnie, muszę się doprowadzić div.result,

mnie zrozumieć, proszę zajrzeć do mojego kodu:

HTML

<form id="uploader" action="uploader.php" method="post" enctype="multipart/form-data"> 
    <input id="file" type="file" name="uploader" value="" draggable="true"> 
    <input name="submit" type="submit" class="submit" value="Upload"> 
    <div class="result"></div> 
</form> 

plik uploader.php: Kod

<?php 
    if(isset($_POST['submit']) and $_SERVER['REQUEST_METHOD'] == "POST"){ 
     echo 'done!'; 
    } 
?> 

jQuery:

jQuery(document).ready(function() { 

    $('#uploader').change(function(){ 

     $(".result").html(''); 

     $(".result").html('wait..'); 

     $("#uploader").ajaxForm({ 
      target: '.result', 
      success: function() 
      { 
       $('.result').hide().slideDown('fast'); 
       $('#uploader')[0].reset(); 
      }, 

     }); 

    }); 

}); 

Potrzebuję echo "done" w .result div, nie chcę przekierowywać mnie do strony uploader.php.

Answer 1

Praca z .ajaxSubmit ({})

jQuery(document).ready(function() { 

    $('#file').change(function() { 

     $(".result").html(''); 
     $(".result").html('wait..'); 

     $("#uploader").ajaxSubmit({ 
      target: '.result', 
      success: function() 
      { 
       $('.result').hide().slideDown('fast'); 
       $('#uploader')[0].reset(); 
      }, 
     }); 

    }); 

}); 

Dzięki wszystkim.

Answer 2

Czy rzeczywiście coś robi po zmianie wartości wejściowej? Chodzi mi o to, czy składa formularz? Czy to się dzieje tylko po kliknięciu przycisku przesyłania?

Wydaje mi się, że twój scenariusz tak naprawdę nic nie robi. Wysłuchuje zdarzenia onchange na elemencie formularza, ale zdarzenie to, z mojego doświadczenia, nigdy nie jest uruchamiane na <form>. Więc masz tylko formularz HTML, który przesyła się bez pomocy skryptu.

Ponadto nie jestem pewien, czy z powodów bezpieczeństwa można przesłać formularz wieloczęściowy/formularz danych ze skryptem. Być może myliłem się co do tego, ale tak czy inaczej, a może zamiast tego używać iframe?

<form id="uploader" action="uploader.php" method="post" enctype="multipart/form-data" target="resultframe"> 
    <input id="file" type="file" name="uploader" value="" draggable="true"> 
    <input name="submit" type="submit" class="submit" value="Upload"> 
    <div class="result"><iframe name="resultframe" onload="$('.result').hide().slideDown('fast');"></iframe></div> 
</form> 

Szczerze mówiąc nie wiem, jeśli onload działa na iframe w tych dniach, nie próbowałem go od lat. W przeciwnym razie usuń <div class="result"> i odpowiadające im </div> i umieść je w pliku wyjściowym uploader.php wraz ze skryptem animacji.

Answer 3

Kod poniżej powinien rozwiązać dużo problemów stoją, kawałki mojego kodu może potrzebować trochę tweeking rozwiązać Twój problem i siedzieć wewnątrz innego kodu, ale jej wszystko komentuje tak powinno być w porządku

HTML

<form id="uploader" action="uploader.php" method="post" enctype="multipart/form-data"> 
<input id="file" type="file" name="uploader" value="" draggable="true"> 
<input name="submit" type="submit" class="submit" value="Upload"> 
<div class="result"></div> 

JAVASCRIPT

$(function() { 
// on form submit 
$("#uploader").submit(function() { 
var formdata = new FormData(); 
formdata.append("submit", true); 
formdata.append("uploader", $("#file").prop('files')); 
// prevent the form from uploading ***problem 1*** 
event.preventDefault(); 
    // send ajax request 
    $.ajax({ 
     type: 'POST', 
     url: 'uploader.php', 
     data: formdata, 
     dataType: 'json', 
     beforeSend:function(){ 
     //This happens before your request is sent to uploader.php 
     $('.result').html('Wait...'); 
     }, 
     success:function(data){ 
     // when the page responds 
     // the page responds with a json object so its easy 
     // ***problem 2*** 
     if (data.status) { 
      // if the upload worked 
      $('.result').html('success!'); 
     } else { 
      // if the upload didn't work 
      $('.result').html('failure!'); 
     } 
     }, 
     error:function(){ 
     // you can remove the entire error if you want but i'd leave it in just incase 
     // incase any javascript implodes 
     $('.result').html('Oops something went wrong :/'); 
     } 
    }); 
}); 

});

PHP

$json = array(); 
// query the upload 
if (isset($_POST['submit'])) { 
    // user uploaded do whatever with the data sent 
    $json['status'] = true; 
} else { 
    // user didn't upload do whatever here too 
    $json['status'] = false; 
} 
// echo our json and output as plain txt for the ajax datatype 
echo json_encode($json); 
// header plain text just incase jquery isn't smart enough to read between the html 
header("Content-Type: text/plain"); 

Wszelkie problemy, pytania lub korekty wymagają tylko skomentować

Answer 4

Jako że akcja twojego formularza to uploader.php, strona zostanie przekierowana do uploader.php po przesłaniu.więc musisz zmienić akcję i użyć ajax, aby zaktualizować div.result. sprawdź te linki raz. http://www.formget.com/form-submission-using-ajax-php-and-javascript/ http://blog.teamtreehouse.com/uploading-files-ajax