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

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 处理程序，这样无论成功/失败，gif 都会在 ajax 调用完成时隐藏。