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。