0

Вот мне интересно, как сделать прогресс-бар? Например я загружаю фотографию и вижу счётчик процентов загрузки. Как это вообще сделать? А именно хотелось бы увидеть просто алгоритм.

3
  • Тысяча раз сделали до вас. webappers.com/2007/07/31/… Вот пример пятилетней давности.
    – igumnov
    19 сен 2012 в 16:11
  • Для загрузки фоток с пк, нужен флеш что бы отобразить прогресс загрузки, или как вариант можно посмотреть malsup.com/jquery/form/#file-upload
    – markuper
    19 сен 2012 в 18:22
  • 5
    Флеш? Для прогресс-бара? Какой год то, а?)
    – andrewshka
    19 сен 2012 в 19:12

3 ответа 3

3

Писать вручную обработку загрузки файла очень долгая и трудная затея. Когда то писал скрипт на html 5 для загрузки файлов любого размера на сервер. Очень много кода и проблем.

Если вам это срочно нужно по работе, то выход только 1 это идти к фрилансерам.

Если же это ради интереса то использовать следует HTML5 File API. Вот код который при загрузке файла в браузер покажет его содержимое. Проверять надо в разных браузерах. Дальше уже имя содержимое файла его через ajax передавать.

<!-- Форма загрузки файла-->
<form id="meta">
<div><input type="file" id="files" onload="получить_файл()" name="file"></div>
</form>

<script>
function получить_файл(){
document.getElementById('files').addEventListener('change',function(e){
// Ни одного файла не выбрано
if(!e.target.files.length)
{
alert('Выберите файла!');
return;
}

// Берем первый файл.
первый_файл = e.target.files[0];
var имя_файла = первый_файл.name;
var тип_файла = первый_файл.type; // может и не определить так что не используй
var размер_файла_в_байтах = первый_файл.size;

alert('\nимя файла=' + имя_файла +'\nтип_файла=' + тип_файла + '\nРазмер файла=' + размер_файла_в_байтах);

var чтение_файла = new FileReader();  
var конец_резки =  первый_файл.size; 
var блок_резки = первый_файл.mozSlice(0, конец_резки); // в будущем посмотреть на mozSlice != slice
чтение_файла.readAsBinaryString(блок_резки); //  readAsDataURL   // readAsBinaryString

// вот здесь загрузка файла в браузер и показ содержимого
чтение_файла.onload = function(e)
{
alert ("\nсодержимое: \n\n" + чтение_файла.result);
};

});
}
получить_файл();
</script>
3
  • Ребят, мне нужно узнать, как вычислять % загрузки и всё. Загрузил фотографию например и узнать, на сколько % она загружена.
    – ModaL
    22 сен 2012 в 7:42
  • У вас сама загрузка уже работает? Или вы хотите чтобы мы узнали как загрузить изображение, как получить состояние загрузки от javascript и как вычислить длину полоски исходя из этих данных?
    – manking
    22 сен 2012 в 9:44
  • @manking Вот именно этого и хочет узнать 99% людей. Я гугл вывернул на изнанку что бы этого узнать, но так и не вышло. Если есть хоть какой то рабочий примерчик, подскажи пожалуйста !!!
    – webkostya
    22 сен 2012 в 13:32
1

Можно воспользоваться html5-им прогресс баром http://htmlbook.ru/html/progress + ajax. Ну конечно смотря как вы загружаете файл, у некоторых библиотек отсылается % загрузки

0

Как вариант сначала с этим разобраться: http://jqueryui.com/demos/progressbar/#default. Иногда лучше понять сам смысл происходящего, потом можно свои прогрессбары лепить, только мозк включить.

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.