ajaxForm 未提交文件输入选择更改答案

【问题标题】：ajaxForm not submitting on file input select changeajaxForm 未提交文件输入选择更改
【发布时间】：2015-11-22 09:29:13
【问题描述】：

大家好，我正在尝试提交一个包含文件输入类型的简单表单。挑战在于我希望在文件选择时提交。

我的表格如下：

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

出于某种原因，我只在控制台中看到“正在提交...”，除此之外什么都没有，也没有任何内容被提交。

任何帮助将不胜感激！

谢谢。

【问题讨论】：

标签： javascript jquery forms ajaxform ajax-forms

【解决方案1】：

以下似乎有效。

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

【讨论】：

【解决方案2】：

来自 jQuery 文档：

当用户尝试提交表单时，提交事件被发送到元素。它只能附加到元素上。可以通过单击显式输入 type="submit"、input type="image" 或按钮 type="submit" 来提交表单，或者在某些表单元素具有焦点时按 Enter。

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

尝试添加适当的标签，例如

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

【讨论】：

这会阻止类型文件正常运行。它不显示浏览操作系统 gui。