Question

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

我已经实现了一个带有动作的表单来加载执行上传的php文件，并且提交表单调用一个函数来创建一个＆＃34;层＆＃34;用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

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

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

@ deed02392写道：

javascript实际上是在添加这些DOM对象吗？你需要调试它。试试FireBug＆＃39;。

（N.B：http://getfirebug.com/whatisfirebug）

@palmic写道：

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

OP写道：

没办法，它没有用......经过多次尝试我用这个www.phpfileuploader.com解决了

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

1 个答案: