ajaxForm不提交文件输入选择更改

ajaxForm not submitting on file input select change

本文关键字：选择 输入 文件 提交 ajaxForm      更新时间：2023-09-26

嘿，伙计们，我想提交一个简单的表单与文件输入类型在它。挑战在于，我希望提交发生在文件选择。

我的表格如下:

<form id="uploadForm" action="submit.php" method="post" enctype="multipart/form-data">
    <div class="fileUpload btn btn-lg btn-primary">
        <span>Choose File</span>
        <input id="imageBtn" type="file" class="upload" name="image"/>
    </div>
</form>

我的JavaScript代码如下:

$("input#imageBtn").change(function () {
        console.log("submitting...");
        // bind to the form's submit event
        $('#uploadForm').submit(function() {
            console.log("submitting...form");
            $('#uploadForm').ajaxSubmit();
            return false;
        });
});

由于某些原因，我在控制台只看到"提交…"，除此之外什么都没有，也没有提交。

任何帮助都将非常感激!

谢谢。

来自jQuery文档:

当用户试图提交表单时，submit事件被发送到元素。它只能附加到元素上。表单可以通过点击一个显式的input type="submit"， input type="image"，或者button type="submit"来提交，或者当某些表单元素有焦点时按Enter键来提交。

https://api.jquery.com/submit/

尝试添加合适的标签，如

<input id="imageBtn" type="file submit" class="upload" name="image"/>

下面的操作似乎可以。

<form id="imgForm" action="action.php" method="post" enctype="multipart/form-data">
        <div class="fileUpload btn btn-lg btn-primary">
            <span>Choose File</span>
            <input id="imageToBeUploaded" type="file" class="upload" name="image"/>
        </div>
</form>
$("body").on('submit', '#imgForm', function(){
    $(this).ajaxForm({target:'#uploadStatus'});
    console.log("submitting...");
    return false;
});
/* Uploading Profile BackGround Image */
$('body').on('change','#imageToBeUploaded', function() {
    //submit the form
    $("#imgForm").submit();
});
相关文章：