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

     }); 

    }); 

}); 

我需要在.result div中回显'done'，我不想将我重定向到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表单而不需要脚本的帮助。

除此之外，出于安全原因，我不确定您可以使用脚本提交多部分/表单数据表单。也许我错了，但无论如何，如何使用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