通过ajax jquery php api上传文件

Question

我有以下格式的代码。

PHP 文件：

<form action="http://clientwebapi.com/createEvent" id="form_createEvent" method="post" enctype="multipart/form-data">
<input type="text" name="image_title" />
<input type="file" name="media" accept="image/*,video/*"/>
</form>

JQUERY 文件：

$('#form_createEvent').submit(function () {
    var form = $(this);
    $.ajax({
        url: form.attr("action"),
        type: form.attr("method"),
        xhrFields: {
            withCredentials: true
        },
        data: form.serialize()
    }).done(function () {
        showCurrentLocation();
        alert('Event created successfully..');
        location.reload();

    }).fail(function () {
        alert("fail!");
    });
    event.preventDefault();
});

以上 Jquery 代码正在提交中。此外，当我提交以下格式时，它将重定向到“http://clientwebapi.com/createEvent”并成功创建事件。

表单提交并重定向到客户端页面：

$('#form_createEvent').submit(function () {
    var fd = new FormData();
    fd.append('media', input.files[0]);

    $.ajax({
        url: form.attr("action"),
        data: fd,
        processData: false,
        contentType: false,
        type: form.attr("method"),
        success: function (data) {
            alert(data);
        }
    });
event.preventDefault();

});

在此处提交表单并使用给定图像创建事件时如何防止。请帮忙

Answer 1

您忘记将 event 作为参数添加到 submit 函数：

$('#form_createEvent').submit(function (event) {

Answer 2

我找到了答案。我在这里犯了一些错误。我使用下面的代码解决了..

$('#form_createEvent').submit(function() { 
            var form = new FormData($(this)[0]); 
            $.ajax({
                url: 'http://clientwebapi.com/createEvent/',
                type: 'POST',
                xhrFields: {
                    withCredentials: true
                },
                async: false,
                cache: false,
                contentType: false,
                processData: false,
                data: form,
                beforeSend: function () {
                    $("#output_process").html("Uploading, please wait....");
                },
                success: function () { 
                    $("#output_process").html("Upload success.");
                },
                complete: function () {
                    $("#output_process").html("upload complete.");
                },
                error: function () {
                    //alert("ERROR in upload");
                    location.reload();
                }
            }).done(function() { 
                alert('Event created successfully..');

            }).fail(function() {
                alert("fail!");
            });
            event.preventDefault();
        });

Answer 3

您可以通过return false;停止表单提交

$('#form_createEvent').submit(function () {
    // some code
    $.ajax({
        // some code/objects
    });

    return false; // here, it will stop the form to be post to the url/action

});