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

我正在尝试用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，更大的问题是在家里可以，但在工作中似乎已经可以了。

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