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

当您更改输入值时，它是否真的在做任何事情？我的意思是它提交表格？还是仅当您单击提交按钮时才会发生这种情况？

在我看来，您的脚本实际上并没有做任何事情。它侦听表单元素上的 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 2

使用 .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 3

由于您的表单的操作是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

jQuery 如果更改输入值则提交表单

jQuery Submit form if change input value

javascript

php

jquery

jqueryform