Php 在多部分表单提交上显示加载gif

我试图在提交多部分表单（文件上传）之前显示正在加载的gif，这是我的代码。。但是图像没有显示。。如果删除submit（），它会显示，因此。。不是路径或语法问题

$('#btnSubmit').click(function() {
    document.getElementById('loader').innerHTML = "<img src='<?= url::base() ?>themes/img/loading.gif' border='0' />";
    $('#uploadform').submit();
});

$（'btnSubmit'）。单击（函数（）{
document.getElementById（'loader'）.innerHTML=“themes/img/loading.gif'border='0'/>”；
$（'#uploadform'）。提交（）；
});

如果您使用的是实际的内置表单提交方法，那么可能是因为它在加载gif之前很久就开始加载页面了

---

我通常使用httprequests动态构建内容，因此，当我提交新请求时，我会将页面内容更改为加载图像，直到收到新页面。

我猜问题在于apache处理的图像请求

因此，我将图像加载到div中隐藏它

然后我从javascript中显示它：

document.getElementById('loader').style.display = "inline";

工作得很有魅力；）

$（'#loader'）.html=“themes/img/loading.gif'border='0'/>”

---

这将正确插入加载图像，但除非您告诉jQuery使用$.post提交表单，否则您将被带到一个新的提交页面，这样您就不会看到图像了。

同意Teja的评论。除非以异步方式提交，否则gif显示的速度是否取决于浏览器开始加载下一页（或回发页）的速度

如果您真的想显示gif（必须是某种描述的ajax），您可以做的是

$（“#btnsupmit”）。单击（函数（e）{
e、 preventDefault（）；//停止任何“立即”回发或重新定向
$（“#加载程序”）.hide（）
.html（“themes/img/load.gif'border='0'/>”）
.delay（1000）.fadeIn（200，函数（）{
//使用$.ajax或其他合适的方式提交表单-在回调时重新生成页面或导航到新页面
});
});

从根本上说，尽管正如Jonas和Teja都提到的，如果你不使用ajax，那么用户反馈已经存在（即浏览器版本的“加载gif”将显示，因为它试图加载一个新页面），那么为什么要在你的页面上获取加载gif并使其看起来“Web 2.0”呢

---

要么使用ajax，要么让浏览器向用户提供视觉反馈。

这里没有任何ajax。您直接提交表单，它应该直接将用户带到下一页。它将显示加载图像，直到与新页面建立连接，在这种情况下，它将删除旧页面，并开始在空白屏幕上加载新页面。如果您希望加载映像在整个加载过程中保持不变，则需要使用动态内容加载，如ajax请求。

$("#btnSubmit").click(function(e){
    e.preventDefault(); // stops any 'immediate' post back or re-direction
    $("#loader").hide()
    .html("<img src='<?= url::base() ?>themes/img/loading.gif' border='0' />")
    .delay(1000).fadeIn(200, function(){
        // submit form using $.ajax or whatever suits - rebuild page on callback or navigate to new page
    });
});