通过AJAX jQuery的PHP API上传文件 [英] Upload file via ajax jquery php api

问题描述

我具有code与下面的格式。

I am having the code with the below format.

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文件：

JQUERY file:

$('#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的code被提交。另外虽然我提出了下面的格式，它会重定向到 http://clientwebapi.com/createEvent 和事件成功创建。

The above Jquery code is submitting. Also While I am submitting the below format, It will redirect to the "http://clientwebapi.com/createEvent" and Event created successfully.

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

Form Submit and redirect to client page:

$('#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();

});

在这里，我怎么能prevent同时提交表单，并创建与给定图像的情况。好心帮

Here How can I prevent while submit the form and create the event with the given image. Kindly help

推荐答案

我找到了答案了这一点。我在这里做了一些错误。我用下面的code解决。

I found the Answer for this. I made some mistake here. I resolved by using the below code..

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

这篇关于通过AJAX jQuery的PHP API上传文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！