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。

的信息

ajax调用上传图片正在冻结浏览器

1 个答案: