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

Question

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

我已经实现了一个表单，其中包含一个操作来加载执行上传的 php 文件，并且 onsubmit 表单调用一个函数，该函数使用 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

(在评论和问题编辑中回答。转换为社区 wiki 答案。请参阅 What is the appropriate action when the answer to a question is added to the question itself? )

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

@deed02392 写道:

Is the javascript actually adding these DOM objects? You need to debug that. Try 'FireBug'.

(注:http://getfirebug.com/whatisfirebug)

@palmic 写道:

try uploadify.com - its complete upload widget with multiple files option. There is very nice progressbar solution. uploadify 2 uses flash object to upload files, uploadify 3 uses html5, but its only some alpha yet.

OP 写道:

no way, it doesn't work.. after a lot of attempts I solved with this www.phpfileuploader.com