Progress Bar - gif для загрузки файла php

Question

Я пытаюсь реализовать страницу для загрузки pdf-файла на свой сервер с помощью php-кода. Нет проблем с загрузкой, но я хотел бы сделать что-то визуальное для пользователей, которые должны видеть своего рода индикатор выполнения. Поскольку реальный индикатор прогресса немного хлопот, покажет анимационный 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

(Ответил в комментариях и вопросительных правок. Преобразованный в сообщество вики ответа см. What is the appropriate action when the answer to a question is added to the question itself?)

обсуждение вокруг решения этого вопроса, в основном, ссылки на другие веб-сайты, которые имеют загружаемые решения сценариев к этой проблеме. StackOverflow отменяет ответы, которые являются чисто URL-ссылками, поскольку ссылка может стать устаревшей, что делает ответ бесполезным. Однако само обсуждение релевантно к решению ....

@ deed02392 писал:

ли Javascript на самом деле добавление этих объектов DOM? Вам нужно отладить это. Попробуйте «FireBug».

(N.B: http://getfirebug.com/whatisfirebug)

@palmic писал:

попробовать uploadify.com - его полный виджет загрузки с опцией несколько файлов. Существует очень приятное решение progressbar. uploadify 2 использует флеш-объект для загрузки файлов, uploadify 3 использует html5, но его только альфа пока.

ОП писал:

никоим образом, он не работает .. после того, как много попыток я решил с этим www.phpfileuploader.com