进度条 - 用于 php 文件上传的 gif

Question

我正在尝试使用 php 代码实现将 pdf 文件上传到我的服务器的页面。 上传没问题，但我想为应该看到一种进度条的用户制作一些视觉效果。 由于真正的进度条有点麻烦，显示动画 gif 就足够了。

我已经实现了一个表单，该表单具有加载执行上传的 php 文件的操作，并在提交表单时调用一个函数，该函数创建一个带有 gif 和消息的“层”。

<form action = "file_upload.php" method="post" enctype="multipart/form-data" id="upload-form" onSubmit= "Loader()">

<label for="file">Filename:</label>
<input type="file" name="file" id="file" />
<br />
<input type="submit" name="submit" value="Submit" />
</form>


function Loader (){ 

// Create a white box to cover the page.
var back = document.createElement('div');
back.style.backgroundColor = '#ffffff';
back.style.position = 'fixed';
back.style.zIndex = '0';
back.style.left = '0px';
back.style.top = '0px';
back.style.right = '0px';
back.style.bottom = '0px';
document.body.appendChild(back);

// Add a box to contain the message.
var box = document.createElement('div');
box.style.position = 'absolute';
box.style.zIndex = '1';
box.style.width = '250px';
box.style.margin = '15px ' + ((document.body.offsetWidth / 2) - (250 / 2)) + 'px';
box.style.fontFamily = 'Verdana, Arial, serif';
document.body.appendChild(box);



// Add the "Please wait" header
var message = document.createElement('span');
message.id = 'loading_header';
message.style.display = 'block';
message.style.fontSize = '175%';
message.style.fontWeight = 'bold';
message.style.textAlign = 'center';
message.innerHTML = 'Please wait';
box.appendChild(message);

// Add the subheader message
var message = document.createElement('span');
message.id = 'loading_message';
message.style.display = 'block';
message.style.fontSize = '125%';
message.style.textAlign = 'center';
message.innerHTML = 'Your files are being uploaded.';
box.appendChild(message);

// Add a loading image.
var img = document.createElement('img');
img.setAttribute('src', './Progress.gif');
img.style.display = 'block';
img.style.width = '64px';
img.style.height = '64px';
img.style.margin = '15px auto';
box.appendChild(img);

}

问题是上传成功了，但是没有显示gif，更大的问题是在家里可以正常工作，但是在工作中好像就不行了。

您认为这可能是互联网连接问题吗？有什么想法吗？

Answer 1

（在 cmets 和问题编辑中回答。转换为社区 wiki 回答。见 What is the appropriate action when the answer to a question is added to the question itself?）

围绕这个问题的解决方案的讨论主要是指向其他网站的链接，这些网站有这个问题的可下载脚本解决方案。 StackOverflow 弃用纯粹是 URL 链接的答案，因为链接可能会变得陈旧，导致答案无用。然而，讨论本身与解决方案密切相关......

@deed02392 写道：

javascript 是否真的添加了这些 DOM 对象？你需要调试它。试试“FireBug”。

（注：http://getfirebug.com/whatisfirebug）

@palmic 写道：

试试uploadify.com - 它具有多个文件选项的完整上传小部件。有非常好的进度条解决方案。 uploadify 2 使用 flash 对象上传文件，uploadify 3 使用 html5，但它还只是一些 alpha。

OP 写道：

不可能，它不起作用..经过多次尝试，我用这个www.phpfileuploader.com解决了