附加加載使用AJAX和PHP文件上傳的gif

所以我有一個上傳圖像文件到服務器，並相應地將他們的信息保存在數據庫中。其中一些文件很大，需要時間上傳，所以當上傳使用ajax時，我需要合併一個loading.gif。我也使用相同的AJAX功能來防止頁面刷新，因爲我上傳了幾張圖片。附加加載使用AJAX和PHP文件上傳的gif

這些都是我使用

function showLoading(){ 
document.getElementById("loading").style = "visibility: visible"; 
} 
function hideLoading(){ 
document.getElementById("loading").style = "visibility: hidden"; 
}

這是AJAX兩個JS功能

$(function() { 
     $('form#data').submit(function (e){ 
      e.preventDefault(); 
      e.stopImmediatePropagation(); 
      var formData = new FormData($(this)[0]); 
      showLoading(); 
      $.ajax({ 
       type:'POST', 
       url: 'upload.php', 
       data: formData, 
       async:false, 
       cache:false, 
       contentType: false, 
       processData: false, 
       success: function (returndata) { 
        $('#result').hideLoading().html(returndata); 
         alert("Data has been Uploaded: "); 
        } 

      }); 
      return false; 
     }); 
});

這是圖片標籤

<img id='loading' src='loading.gif' style='visibility: hidden;'>

當我點擊提交，我可以只能看到loading.gif。它以前用來告訴我該文件已上傳並返回了輸入詳細信息。此外，我需要load.gif在文件上傳後隱藏。

我哪裏錯了？

來源

2016-09-28 siddparkar

On成功函數，你需要調用隱藏函數，'hideLoading（）; $（'＃result'）.. html（returndata）;' – dinesh

此：

 $('#result').hideLoading().html(returndata);

你打電話hideloading()，如果它是一個jQuery方法。它不是，所以代碼是一個語法錯誤：調用未定義的方法。

你應該有

success: function() { 
    hideLoading(); 
}

而且注意你的代碼只是假設成功。如果因任何原因上傳失敗，您仍然會顯示加載gif。您應該將隱藏調用移至complete處理程序，以便無論成功/失敗，gif都會在ajax調用完成時隱藏。

來源

2016-09-28 15:41:00

它沒有按我期望的方式工作，所以我實現了一個進度條。它的工作，但不重置後續的文件上傳。 http://stackoverflow.com/questions/39777837/progress-bar-for-file-uploads-to-php-using-ajax-and-bootstrap – siddparkar

附加加載使用AJAX和PHP文件上傳的gif

回答

相關問題