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。

您可以阅读有关该特性的信息 in the API .