javascript - Upload image with JS and PHP very slow

i created js code that when user change some file input its send POST request to server and upload the file. but the JS side very slow if i try to upload 4MB image, the PHP file start after 1 min i tried to add some log to the php file and i saw that its another to the start of the file after 1 min. this is the JS code:

$("input[name='upload-avatar-input']").on('change', function () {
    const me = this;
    setLoading(true);
    if (this.files.length > 0) {
        if (!window.FormData) {
            alert("Error!");
            return false;
        }
        const url = $(this).closest("form").attr("action");
        $.ajax({
            url: url,
            method: 'POST',
            dataType: 'json',
            data: new FormData(this.form),
            contentType: false,
            processData: false,
            beforeSend: function () {
                if ($(".myformPop").length <= 0)
                    $("body").append('<div class="myformPop"><i class="close">close</i><div class="heading"></div><div class="output"></div></div>');
            },
            success: function (data) {
                if (data.success === 1) {
                    const t = new Date().getTime();
                    const img = $(me).closest("form").find("#avatarCircle .inner");
                    img.css("background-image", "url('" + data.url + "?t=" + t + "')");
                    $('.delete-avatar-button').attr("disabled", false);
                } else {
                    const pop = $(".myformPop");
                    pop.find("div.heading").html(data.heading);
                    pop.find("div.output").html('<ul>' + data.message + '</ul>');

                    $.getScript("assets/js/jquery.bpopup-0.7.0.min.js", function (bpop_data, textStatus, jqxhr) {
                        pop.bPopup({
                            bmodalClose: false,
                            onClose: function () { }
                        });
                    });
                }
                setLoading(false);
            },
            complete: function () { },
            error: function () {
                setLoading(false);
            }
        });
    } else {
        setLoading(false);
    }
});
Copy code

and the url variable is some php file that upload the file, but the file started after 1 min, so the problem in the js code. what can i do with large files like 4MB - 8MB (its normal size of mobile hd images)

tnx

Didn't find the answer?

Our community is visited by hundreds of web development professionals every day. Ask your question and get a quick answer for free.