附加加载 gif 以使用 AJAX 和 PHP 上传文件

Question

所以我有一个将图像文件上传到服务器并相应地将它们的信息保存在数据库中。其中一些文件很大并且需要时间来上传，所以我需要在使用 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。它以前用来告诉我文件已上传并返回输入详细信息。我还需要在文件上传后隐藏 loading.gif。

我哪里错了？

Answer 1

这个：

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

您正在调用hideloading()，就好像它是一个JQuery 方法一样。不是，所以代码是语法错误：调用未定义的方法。

你应该有

success: function() {
    hideLoading();
}

请注意，您的代码只是假设成功。如果由于某种原因上传失败，您仍然会显示加载 gif。您应该将该隐藏调用移至 complete 处理程序，以便无论成功/失败，当 ajax 调用完成时，gif 将隐藏。