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

我正试图实现一个网页上传pdf文件到我的服务器与php代码。 上传没有问题，但是我想为那些应该看到进度条的用户提供一些可视化的东西。 因为真正的进度条有点麻烦，所以显示动画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);

}

文件名：


函数加载器（）{
//创建一个白色框来覆盖页面。
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（后面）；
//添加一个包含消息的框。
var-box=document.createElement（'div'）；
box.style.position='绝对'；
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'；
文件.正文.附件（框）；
//添加“请稍候”标题
var message=document.createElement（'span'）；
message.id='loading_header'；
message.style.display='block'；
message.style.fontSize='175%'；
message.style.fontwweight='bold'；
message.style.textAlign='center'；
message.innerHTML='请稍候'；
框。追加子项（消息）；
//添加副标题消息
var message=document.createElement（'span'）；
message.id='loading_message'；
message.style.display='block'；
message.style.fontSize='125%'；
message.style.textAlign='center'；
message.innerHTML='正在上载您的文件'；
框。追加子项（消息）；
//添加一个正在加载的图像。
var img=document.createElement（'img'）；
setAttribute（'src'，'./Progress.gif'）；
img.style.display='block'；
img.style.width='64px'；
img.style.height='64px'；
img.style.margin='15px自动'；
框。附加子对象（img）；
}

问题是上传可以工作，但没有显示gif，更大的问题是在家里它可以工作，但在工作中它似乎不再工作了

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

（在评论和问题编辑中回答。转换为社区wiki答案。请参阅）

围绕此问题解决方案的讨论主要是指向其他网站的链接，这些网站具有此问题的可下载脚本解决方案。StackOverflow不支持纯粹的URL链接，因为链接可能会过时，从而导致答案无效。然而，讨论本身与解决方案密切相关

@deed02392写道：

---

javascript实际上是在添加这些DOM对象吗？你需要调试它。试试“萤火虫”

（注：）

@帕尔米奇写道：

try-它的完整上载小部件带有多个文件选项。有非常好的progressbar解决方案。uploadify 2使用flash对象上传文件，uploadify 3使用html5，但它还只是一些alpha

OP写道：

不可能，它不起作用。。经过多次尝试，我终于解决了这个问题

---

javascript实际上是在添加这些DOM对象吗？你需要调试它。试试“FireBug”。试试-它的完整上传小部件和多个文件选项。有非常好的progressbar解决方案。uploadify 2使用flash对象上载文件，uploadify 3使用html5，但它只是一些alpha。尝试将onsubmit作为onclick放到submit按钮上。我认为img src可能有问题：“src”，“./Progress.gif”我会将背景图像设置为div，而不是对gif使用img src，但不知道它在不同的位置工作。