Question

下面是我创建的HTML表单，当用户点击提交时，表单数据通过AJAX提交给服务器。

我有一个文件输入控件，但文件数据也没有提交。我想知道如何修改现有代码以允许将文件发送到服务器。

以下是我的HTML：

<form method="post" action="profile.php" enctype="multipart/form-data" class="form-horizontal" >
    <fieldset>

        <!-- Form Name -->
        <legend>Complete Your Profile</legend>

        <!-- Text input-->
        <div class="form-group">
            <label class="col-md-3 control-label" for="Fullname">Fullname</label>
            <div class="col-md-6">
                <input id="Fullname" name="Fullname" placeholder="" class="form-control input-md" required="" type="text">
            </div>
        </div>

        <!-- Text input-->
        <div class="form-group">
            <label class="col-md-3 control-label" for="DoB">Date of Birth</label>
            <div class="col-md-6">
                <input id="DoB" name="DoB" placeholder="" class="form-control input-md" required="" type="text">

            </div>
        </div>

        <!-- Text input-->
        <div class="form-group">
            <label class="col-md-3 control-label" for="Displayname">Display Name</label>
            <div class="col-md-6">
                <input id="Displayname" name="Displayname" placeholder="" class="form-control input-md" required="" type="text">

            </div>
        </div>

        <!-- File Button -->
        <div class="form-group">
            <label class="col-md-3 control-label" for="btnImage">Display Pic</label>
            <div class="col-md-6">
                <input type="file" name="Displaypic">
            </div>
        </div>

        <!-- Multiple Radios (inline) -->
        <div class="form-group">
            <label class="col-md-3 control-label" for="Gender">Gender</label>
            <div class="col-md-6">
                <label class="radio-inline" for="Gender-0">
                    <input type="radio" name="Gender" id="Gender-0" value="Male" checked="checked">Male
                </label>
                <label class="radio-inline" for="Gender-1">
                    <input type="radio" name="Gender" id="Gender-1" value="Female">Female
                </label>
            </div>
        </div>

        <!-- File Button -->
        <div class="form-group">
            <label class="col-md-3 control-label" for="btnImage"></label>
            <div class="col-md-6">
                <input type="submit" name="btnSubmit" value="Finish" id="btnSubmit" class="btn-style-red" />&nbsp;<img src="img/loading.gif" class="loading"/>
            </div>
        </div>
        <input type="hidden" name="UserID" value="<?php echo $curruser[0]; ?>" />
    </fieldset>

    <span>
</form>

接下来是我的JS：

$(document).ready(function() {
        $("#DoB").datepicker({
            inline: true
        });

        $('form').on('submit', function(e) {
            $(".loading").css("display", "block");
            e.preventDefault();

            $.ajax({
                type: 'post',
                url: 'profile.php',
                data: $('form').serialize(),
                success: function() {
                    $(".ui-msg-success").css("display", "block");
                    $(".loading").css("display", "none");

                    var start = 3;
                    $(".timer").html(start);

                    function timerRedirect(url) {
                        count = parseInt($(".timer").html());
                        count = count - 1;
                        $(".timer").html(count);

                        if (count == 0) {
                            window.location.href = "index.php";
                        }
                    }

                    setInterval(timerRedirect, 1000);
                }
            });

        });

请注意，我已经在Stack Overflow上看到并尝试了几个答案，包括列为可能重复的答案，以及其他网站，但它们对我不起作用。我想修改此代码以接受文件输入并发布到服务器，我想知道这是否可行而不重写并尝试将其他人的代码集成到我的应用程序中。

Answer 1

我找到了我在这里寻找的答案： https://developer.mozilla.org/en-US/docs/Web/Guide/Using_FormData_Objects

即使我无法修改现有代码，这仍然比我在网上找到的其他解决方案更短，更简单易懂（大多数解决方案无效，或仅适用于某些浏览器）

使用AJAX发送带有表单数据的文件

1 个答案: