jQuery Отправить форму, если изменение входного значения

Question

Я использую плагин jquery.form, он работает и хорошо , но когда изменяется входное значение .. оно отправлено хорошо! но перенаправить меня в мой файл uploader.php, я не хочу перенаправить меня, мне нужно, чтобы получить результат в div.result,

понять меня, пожалуйста, загляните в мой код:

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> 

uploader.php файл:

<?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(); 
      }, 

     }); 

    }); 

}); 

Мне нужно выполнить «done» в .result div, я не хочу перенаправлять меня на страницу uploader.php.

Answer 1

Работа с .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(); 
      }, 
     }); 

    }); 

}); 

Спасибо всем.

Answer 2

Действительно ли это что-то делает, когда вы меняете входное значение? Я имею в виду, он представляет форму? Или это происходит только при нажатии кнопки отправки?

Мне кажется, что ваш сценарий на самом деле ничего не делает. Он прослушивает событие onchange в элементе формы, но это событие, по моему опыту, никогда не запускается на <form>. Таким образом, у вас есть только форма HTML-формы без помощи скрипта.

В дополнение к этому, я не уверен, что вы можете отправить форму multipart/form-data со сценарием по соображениям безопасности. Может быть, я ошибаюсь в этом, но в любом случае, как насчет использования 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> 

Честно говоря, я не знаю, если OnLoad работает на IFRAME в эти дни, я не пробовал его в годы. В противном случае удалите <div class="result"> и соответствующие </div> и поместите их в файл uploader.php вместе с сценарием анимации.

Answer 3

Код ниже должен решить много проблем, с которыми вы сталкиваетесь, биты и куски моего кода, возможно, потребуется немного tweeking, чтобы решить вашу конкретную проблему и сидеть в другом коде, но его все комментировал, так что вы должны быть хорошо

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"); 

Любые проблемы, вопросы или корректировки, необходимые только комментарии

Answer 4

Поскольку действие вашей формы является uploader.php, страница будет перенаправлена ​​на uploader.php после отправки.поэтому вам нужно изменить действие и использовать ajax для обновления div.result. проверьте эти ссылки один раз. http://www.formget.com/form-submission-using-ajax-php-and-javascript/ http://blog.teamtreehouse.com/uploading-files-ajax