jquery - ajax 调用上传图片冻结浏览器

Question

这是我用来使用 AJAX 将图像上传到服务器的代码，但由于某种原因，浏览器会冻结，直到图像被上传。请有人告诉我问题背后的原因并帮助我解决它。

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

这是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>

Answer 1

由于async设置为false，您将冻结 UI 线程，直到上传完成。

尝试将其更改为true.

您可以在 API中阅读有关该属性的信息。