Загрузка файлов: uploadprogress и jquery

Загрузка файлов: uploadprogress и jquery

10.01.2009, 17:11

joltiy

Новичок

Регистрация: 09.01.2009

Сообщений: 7

С нами: 9123516

Репутация: 29

Загрузка файлов: uploadprogress и jquery

Хочется рассказать как сделать загрузку файлов, используя uploadprogress (должен установлен у хостера, у меня нет проблем т.к. collocation) и jquery.
Загрузку файлов может лучше на flash реализовать, но т.к. я не силен во flash....
Чем хорош данный метод:

можно легко подогнать под дизайн сайта
показывает скорость загрузки
сколько загруженно
время до завершения загрузки
в процентах сколько загруженно

Для начала скачайте и подключите jquery.js: http://jquery.com/

PHP код:


		
			
<head>

....

<script src="/js/jquery.js" type="text/javascript">

...

</head>

Пример формы для загрузки файла:

PHP код:


		
			


// нужен, что бы убрать лишнее после нажатия на кнопку ЗАГРУЗКИ

<div id="form_upload" style="display: block;">



//форма для загрузки

<form action="/upload.php" method="POST" id="upload" name="upload" enctype="multipart/form-data">





<input type="file" name="uploadfile"  title="Добавить файл"  />



// присваиваем файлу уникальный номер, что бы потом его контролировать

<input type="hidden" name="UPLOAD_IDENTIFIER" value="1234">



// не люблю стандартные кнопки submit +)

<a onclick="startStatus();" href="javascript:document.upload.submit()">Загрузить</a>



</form>

// end: форма для загрузки



</div>





// необходимо, что бы показывать информацию для пользователя

<!-- progress bar-->

   

<div id="progress_bar">

    <div id="bg"><div  id="bar" class="bar"></div><div id="pers"></div></div>

    <div id="info" >

        <div id="in1"></div>

        <div id="in2"></div>

    </div>

</div>

    

<!-- //progress bar-->

Созадать файл info.php:
из которого по uid будем получать данные о файле.

PHP код:


		
			
<?php 



$status = uploadprogress_get_info($_POST['uid']);

 echo json_encode($status) ;



?>

href="javascript:document.upload.submit()" upload - это имя формы.
startStatus(); - функция javascript - после нажатия на кнопку загрузки, начинаем получать информацию о загружаемом файле.

Функция startStatus():

PHP код:


		
			


function startStatus() {

// убираем форму для загрузки файла

$("#form_upload").fadeOut();

//показываем информацию о загружаемом файле

$("#progress_bar").fadeIn();



//через 1.5 сек. начинаем смотреть состояние файла

setTimeout('getStatus()', 1500);



}

Функция getStatus() :

PHP код:


		
			


function getStatus() {

//из файла info.php получаем данные

   $.getJSON("/info.php",{

   uid: "1234", // уникальный номер файла

   math: Math.random() 

   },

        function(data){





            timelast=data.time_last; 

// размер загружаемого фала

            total = data.bytes_total;

// скорость казгрузки b/s

            speed = data.speed_average;

//загружено байт

            bytes = data.bytes_uploaded;

// времени до окончания загрузки

            eta = data.est_sec;

//переводим в минуты время

            min = Math.round(eta / 60);

//секунды

            sec = eta - min*60;

// показываем мин +сек. или секунды

            if(min==0){time=sec+" сек."}else{time=min+" мин."+sec+" сек."}



//добавляем информацию о времени и скорости в  <div id="in1"... используя функцию [B]speeds()[/B]

            $("#in1").html(time+" ("+speeds(speed)+")");

        

//добавляем в <div id="in2"... информацию о сколько загрузили и процентах, используя функцию [B]fsize()[/B]  она будет описана ниже

$("#in2").html(fsize(bytes)+"/"+fsize(total)+"("+Math.round(bytes * 100 / total) + "%"+")");



//рисуем строку загрузки файла

                progressdata(bytes,total);

// добавляем  в центр загрузки проценты <div id="pers"...

            $("#pers").html(Math.round(bytes * 100 / total) + "%");





           });



//вызываем каждую секунду данную функцию, что бы обновлять данные загрузки файла

  setTimeout('getStatus()', 1000);

  }

функции fsize() и speeds() можно объеденить в одну функцию+) :

PHP код:


		
			


function fsize (x) {

    x = Math.round(x / 1024);

    if (x < 1000) {

        return x + " " + "Кб";

    }

    x = Math.round(x * 100 / 1024) / 100;

    return x + " " + "Мб";

}

function speeds (x) {

    x = Math.round(x / 1024);

    if (x < 1000) {

        return x + " " + "Кб/сек";

    }

    x = Math.round(x * 100 / 1024) / 100;

    return x + " " + "Мб/сек";

}

Функция progressdata() :

PHP код:


		
			


function progressdata(bytes,total) {

// увеличиваем ширину <div id="bar"... т.е. строку загрузки файла

$("#bar").css("width",Math.round(bytes * 100 / total)+"%");



}

Добавляем стили css:

PHP код:


		
			


 <style type="text/css">

#progress_bar{

    position:relative;

    width:300px;

    display: none;

    margin:15px 0 0 0px;

}

#in1{

    float:left;

    position:relative;

}

#in2 {

    float:right;

    position:relative;

}

#bg{

    width:300px;

    border:1px solid black;

    height:10px;

    display:block;

}

#info {

    color:gray;

}

.bar{

    position:relative;

    background:#FFBE26;

    height:10px;

//картинка индикации

    background-image:url(/images/uploadprogress_bggreen.png);

    background-repeat: repeat-x;

    width:0%;



}

#pers{

    position:relative;

    text-align: center;

    color: black;

    font-size:9px;

    left:145px;

    top:-10px;

    float:left;

}



</style>

Вот что у меня получилось:

P.S.
Не судите строго, первая статья +)
Спрашивайте если что то непонятно, подробнее обьясню...

P.S.2
При использовании nginx не работает uploadprogress... в инете найдется инфа как это исправить, но не стоит этого делать, лучше создать домен 3 уровня, где frontend apache...

Практически аналогичный загрузчик можно сделать используя php_apc.... если хотите напишу статейку +)

𝕏 Twitter Reddit Telegram Копировать ссылку