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

Discussion in 'Статьи' started by joltiy, 10 Jan 2009.

  1. joltiy

    joltiy Member

    Joined:
    9 Jan 2009
    Messages:
    4
    Likes Received:
    8
    Reputations:
    3
    Хочется рассказать как сделать загрузку файлов, используя 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"// уникальный номер файла
       
    mathMath.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) {
        
    Math.round(1024);
        if (
    1000) {
            return 
    " " "Кб";
        }
        
    Math.round(100 1024) / 100;
        return 
    " " "Мб";
    }
    function 
    speeds (x) {
        
    Math.round(1024);
        if (
    1000) {
            return 
    " " "Кб/сек";
        }
        
    Math.round(100 1024) / 100;
        return 
    " " "Мб/сек";
    }

    Функция 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;
        
    displaynone;
        
    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-repeatrepeat-x;
        
    width:0%;

    }
    #pers{
        
    position:relative;
        
    text-aligncenter;
        
    colorblack;
        
    font-size:9px;
        
    left:145px;
        
    top:-10px;
        
    float:left;
    }

    </
    style>


    Вот что у меня получилось:
    [​IMG]


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

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

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

    Shadow_p1raT Elder - Старейшина

    Joined:
    9 Mar 2008
    Messages:
    174
    Likes Received:
    93
    Reputations:
    0
    Нормалльно,если конечно сам писал!:)больше похоже на перевод:)
    Cсылки по теме:
    Модуль uploadprogress
    Code:
    http://pecl.php.net/package/uploadprogress
    
    Модуль Alternative PHP Cache (APC)
    Code:
    http://pecl.php.net/package/APC
    
    Ну и реализация с использыванием APC
    Code:
    http://t.wits.sg/2008/06/25/howto-php-and-jquery-upload-progress-bar/
    
     
  3. joltiy

    joltiy Member

    Joined:
    9 Jan 2009
    Messages:
    4
    Likes Received:
    8
    Reputations:
    3
    Я не занимаюсь переводом чужих статей +)
    Для своего сайта написал загрузчик, вот решил поделиться, может кому нужно.

    Кстати, http://t.wits.sg/2008/06/25/howto-php-and-jquery-upload-progress-bar/ лучшая статья которую я находил в инете +)
     
    1 person likes this.
  4. BNF

    BNF Elder - Старейшина

    Joined:
    16 Apr 2005
    Messages:
    55
    Likes Received:
    1
    Reputations:
    0
    Вообще неплохо было бы вначале описать примерный алгоритм работы..
    Статья отличная! Добавил +!
     
  5. safnaf

    safnaf New Member

    Joined:
    4 Mar 2009
    Messages:
    1
    Likes Received:
    0
    Reputations:
    0
    А можно прицепить полностью исходники, а то мне как раз такой скрипт надо, а из статьи пытался слепить, че-то не работает :(
    uploadprogress у меня установлен...
     
  6. bombeg

    bombeg Member

    Joined:
    27 Oct 2008
    Messages:
    136
    Likes Received:
    83
    Reputations:
    8
    и как правильно какать!
     
  7. Alex$09

    Alex$09 New Member

    Joined:
    1 Oct 2009
    Messages:
    31
    Likes Received:
    1
    Reputations:
    0
    А выложить можешь?
     
  8. etc

    etc Elder - Старейшина

    Joined:
    16 Feb 2008
    Messages:
    113
    Likes Received:
    175
    Reputations:
    1
    Что тебе выложить-то? В статье, по-моему, все доходчиво описано, - что и как.
     
  9. ghostwizard

    ghostwizard Member

    Joined:
    4 Dec 2005
    Messages:
    127
    Likes Received:
    36
    Reputations:
    21
    Не обойти, используется все по стандарту php, JS тут только плюшки рисует.
     
Loading...
Similar Threads - Загрузка файлов uploadprogress
  1. Osstudio
    Replies:
    11
    Views:
    29,792
  2. SHYLLER
    Replies:
    35
    Views:
    57,996
  3. Kuzya
    Replies:
    9
    Views:
    5,906
  4. guest3297
    Replies:
    33
    Views:
    30,188