Old-school dosya yüklemeleri için göze batmayan ilerleme çubuğu ekleme

6 Cevap php

Özellikle titrek ve düşük bant genişliği bağlantıları için büyük bir gelişme - Hepiniz yüklenirken SWFUpload bir ilerleme çubuğu gösterebilir gibi fantezi, çoğunlukla Flash-tabanlı dosya yükleyicilerimizden yeni nesil biliyorum.

Ancak, bu uploaders tüm istemci tarafında yüklenenler işlemek için nasıl kendi mantığı getirmek. Ben "fancify" Varolan, klasik dosya yüklenenler, yani introducing a progress bar to normal file upload forms için mütevazi bir şekilde arıyorum.

Nedeniyle dosya yükleme mimarisi, bu büyük olasılıkla mümkün değil, istemci tarafında bazı verdiği olmadan.

I am looking for a solution that keeps the tweaking to an absolute minimum, e.g. a component that adds itself to the onsubmit event of a normal form, performs the file upload, displays a nice progress bar, puts the resulting temporary (server side) file path into the form, and submits it. On the server side, I just have to modify my script to use the file path provided by the flash uploader, instead of $_FILES and consorts, and think about security for a moment.

This is not exactly what all the Flash-based uploaders do: They can use data from a form, but they do not provide possibilities to submit the form as is, what is what I'm looking for. I am looking for a (probably) Flash based upload function taken a step further.

6 Cevap

Biz pecl-uploadprogress PECL eklentisini yükleyerek çok basit bu hayata ve formların basit bir AJAX geri arama eklendi:

Bir yükleme anahtarı oluşturun:

$upload_id = genUploadKey();
function genUploadKey ($length = 11) {
  $charset = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789";
  for ($i=0; $i < $length; $i++)
    $key .= $charset[(mt_rand(0,(strlen($charset)-1)))];
  return $key;
}

Bir AJAX geri işleyicisi (örn. uploadprogress.php) oluşturun:

extract($_REQUEST);

// servlet that handles uploadprogress requests:
if ($upload_id) {
  $data = uploadprogress_get_info($upload_id);
  if (!$data)
    $data['error'] = 'upload id not found';
  else {
    $avg_kb = $data['speed_average'] / 1024;
    if ($avg_kb<100)
      $avg_kb = round($avg_kb,1);
    else if ($avg_kb<10)
      $avg_kb = round($avg_kb,2);
    else $avg_kb = round($avg_kb);

    // two custom server calculations added to return data object:
    $data['kb_average'] = $avg_kb;
    $data['kb_uploaded'] = round($data['bytes_uploaded'] /1024);
  }

  echo json_encode($data);
  exit;
}

// display on completion of upload:
if ($UPLOAD_IDENTIFIER) {
...

JQuery ve (aynı zamanda yukarıdaki pasajı içerir) jQuery.uploadprogress kütüphaneleri indirin ve formu ile entegre:

<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery.uploadprogress.0.3.js"></script>
<script type="text/javascript">
jQuery(function () {
    // apply uploadProgress plugin to form element
    // with debug mode and array of data fields to publish to readout:
    jQuery('#upload_form').uploadProgress({
        progressURL:'uploadprogress.php',
        displayFields : ['kb_uploaded','kb_average','est_sec'],
        start: function() {
            $('.upload-progress').show();
        },
    success: function() {
            $('.upload-progress').hide();
            jQuery(this).get(0).reset();
        }
    });
});
</script>

Upload forma ekleyin:

<input name="UPLOAD_IDENTIFIER" type="hidden" value="$upload_id" />

Yani hile yapmak gerekir. Bu bizim kod tabanından çıkarılan ve out-of-the-box çalışmayabilir. Ama size fikir söylemek gerekir.

Yukarı PHP 5.2 kullanın ve bu file upload progress tutorial IBM tarafından size yardımcı olabilir.

Bu multiple file upload tutorial kullanır jQuery + AJAX Upload ... O sunucu tarafında $ _FILES kullanır ve özel

dönüştürecek istemci tarafında bir
yapmak. Ben sizin ihtiyaçlarınıza uyacak şekilde çimdik sanırım.

Sonuncusunu verdiği çok zor ise, Uber-Uploader üzerine SourceForge başka bir seçenektir.

Bu konuyu kapsayan açık kaynak projenin düzinelerce vardır. Ne yazık ki bu sorunsuz uygulamak için önemsiz bir şey değil (en azından istediğiniz şekilde - aksi takdirde biz zaten iyi eski Netscape gün içinde bu gördüğümüz olurdu).

Eğer this demo ve this one gördüğünüz gibi parlak tarafında, HTML5 bu kolaylaştıracaktır.

Ben bu entegrasyon ile iyi şanslar yardımcı olur ve umarım.

jquploader gibi yükleme komut gibi eylem niteliği değer olarak, form içinde bilgi kullanır. Ama bir süre içinde güncellenmiş değil ve Uploadify (btw mükemmel bir script olan) gibi tüm kayışları ve ıslık komut yoksun. Eğer oynamak için bir üs olabileceğini görmek.

Uploadify (bir jQuery eklentisi) kullanılan teknik ihtiyaçlarınızı karşılıyor mu? Demo

Ne kadar komik, ben sadece (diğer şeyler arasında) dosya yükleme ilerleme çubukları yapar düşünüyorum bir JavaScript kütüphanesi Plupload yaklaşık Simon Willison blog gördüm.

Bu Flash, Silverlight, ya da mevcut ne olursa olsun kullanır, ama ben sizden Özetlerin tüm bu uzakta düşünüyorum, bu yüzden hala normal bir HTML formu ile yükleme ediyoruz.

Sen dosya wich kısmının boyutu Server Allready olup olmadığını kontrol etmek gerekir, o zaman ilerleme çubuğu boyayabilirsiniz Ajax başına Client üzerine olsun. (;-) Percantage hesaplamak için, önce delik Verilerin boyutunu kontrol etmeyi unutmayın)

etiketler