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调用完成时隐藏。

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

1 个答案: