附加加载gif文件上传使用AJAX和PHP - Attach loading gif for file upload using AJAX and PHP

Attach loading gif for file upload using AJAX and PHP

本文关键字：AJAX PHP 加载 gif 文件 | 更新日期: 2023-09-27

所以我必须将图像文件上传到服务器，并相应地将其信息保存在数据库中。其中一些文件很大，上传需要时间，所以我需要在使用ajax上传时合并一个loading.gif。我还使用相同的AJAX函数来防止页面刷新，因为我上传了几个图像。

这是我使用的两个JS函数

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

这是AJAX

$(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。它以前用来告诉我文件已经上传并返回输入的详细信息。此外，我需要加载。gif隐藏一旦文件已上传。

我哪里错了?

This:

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

你调用hideloading()，如果它是一个JQuery方法。它不是，所以代码是一个语法错误:调用未定义的方法。

你应该有

success: function() {
    hideLoading();
}

请注意，您的代码只是假设成功。如果上传由于任何原因失败，你仍然会显示正在加载的gif。您应该将该隐藏调用移动到complete处理程序，这样无论成功或失败，当ajax调用完成时，gif都将隐藏。