如果更改输入值，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页面。

- user3492381

---

当拖放文件到我的#file输入框中时，我需要进行提交。 - user3492381

当您点击“提交”按钮时，它应该重定向页面，而当您使用.ajaxForm()时，它不应该。 - Barmar

#updloader是表单元素的选择器，#file将定位到输入字段。 - axel.michel

您需要使用文件选择器来进行更改事件，将ajaxForm绑定到表单上，并且需要提交表单以使ajaxForm生效。就像这段虚拟代码的意思：http://jsfiddle.net/9w7e4o46/ - axel.michel

我使用了你发布的相同代码，它运行良好。http://jsfiddle.net/9w7e4o46/1/ 我已在fiddle中包含了jquery.form。 - Susheel Singh

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>

说实话，我不确定现在是否可以在 iframe 上使用 onload，我已经多年没试过了。如果无法实现，那就把 <div class="result"> 和相应的 </div> 从中移除，将它们与动画脚本一起放入 uploader.php 的输出中。

- Doug McLean

---

他想使用jquery.form.js。他的代码已经正常工作了，可能是因为他没有包含相关的js文件。 - Susheel Singh

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

    });

});

大家好，非常感谢大家。

- user3492381

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

- stevan gorre