CODEWITHSUNDEEP
jqueryajax
Susheel Singh
Susheel Singh

Reputation: 3854

ajax call to upload image is freezing the browser

This is code i am using to upload image to server using AJAX but for some reason the browser freezes till the image is uploaded. please someone tell me what's the reason behind then problem and help me solve it.

$(function() {
    $("#form4").on('submit', function() {
        if($("#file").val()=== ""){
            alert("please select the image to upload");
            return false;
        }
        var formData = new FormData($(this)[0]);
        $.ajax({
            url: 'ajaxify/uploadphoto.php',
            async:true,
            type: 'POST',
            data: formData,
            beforeSend: function() {
                $(".note").show().html("uploading....");
            },
            success: function(data) {
                $(".note").html("uploaded successfully").fadeOut(2000);
                $('.galleryData').load('ajaxify/getphotos.php');
            },
            cache: false,
            contentType: false,
            processData: false
        });
        return false;
    });
});

This the html: 

<form id="form4" action="ajaxify/uploadphoto.php" method="post" enctype='multipart/form-data'>
    <h2>upload album</h2>
    <label>select the file to upload</label>
    <input type="file" id="file" name="file[]" multiple="multiple" /><br/>
    <input type="submit" value="Upload"/>
    <div class="note"></div>
</form>

Upvotes: 1

Views: 1732

Answers (1)

Johan
Johan

Reputation: 35194

Since async is set to false, you are freezing the UI thread until the upload is complete.

Try changing it to true.

You can read about the property in the API.

Upvotes: 3

Related Questions