2015-12-16 29 views
9

Yapmaya çalıştığım şey, ajax kullanarak dosya/dosya bilgilerini upload.php'a yükleyip, daha sonra aynı bilgileri tekrar bir uzak sunucuya remoteUpload.php ile curl olarak yüklemektir. Son olarak, remoteUpload.php dosyasında dosya/dosyaların gerçek yüklenmesini gerçekleştiriyorum.Curl yükleme ilerlemesi görüntülenecek ajax'e nasıl gönderilir

İlk adımı gerçekleştirirken -> dosya/dosya bilgilerini upload.php'a yükledim ajax kullanarak bu adımın bir ilerleme çubuğunu görüntülüyorum.

Ancak, ikinci adımı ne zaman gerçekleştirirseniz ->remoteUpload.php için curl kullanarak aynı bilgiyi tekrar tekrar karşıya yüklediyseniz, ilerleme çubuğu görüntülenmez ve bu benim sorunumdur.

nasıl ajax ikinci adım için ilerleme çubuğu görüntülemek için?

JavaScript:

var upload_btn = document.getElementById('upload_file'); 
var result = document.getElementById('result'); 

upload_btn.onclick = function() { 
    var uploadInput = document.getElementsByName('file[]')[0]; 
    if (uploadInput.files.length > 0) { 
     console.clear(); 
     var ajax = new XMLHttpRequest(); 
     var inputFileData = formData(uploadInput); 
     ajax.onreadystatechange = function() { 
      if (ajax.readyState == 4 && ajax.status == 200) { 
       var json = JSON.parse(ajax.responseText); 
       result.innerHTML = json.text; 
      } 
     }; 
     ajax.upload.addEventListener('progress', function (e) { 
      result.innerHTML = Math.round(e.loaded/e.total * 100) + "%"; 
     }); 
     ajax.open("post", "upload.php"); 
     ajax.send(inputFileData); 
    } 
}; 

function formData(inputFileObj) { 
    var formData = new FormData; 
    var inputFile = inputFileObj.files; 
    if (inputFile.length > 0) { 
     for (i = 0; i < inputFile.length; i++) { 
      formData.append(inputFileObj.name, inputFile[i]); 
     } 
    } 
    return formData; 
} 

PHP: (upload.php)

function progressCallback($dltotal, $dlnow, $ultotal, $ulnow) { 
    static $last; 
    $progress = @round($ulnow/$ultotal * 100); 
    if($last < $progress) echo json_encode(array('text' => $progress)); 
    flush(); 
    $last = $progress; 
} 

if (strtolower($_SERVER['REQUEST_METHOD']) == 'post' && !empty($_FILES)) { 
    foreach ($_FILES['file']['tmp_name'] as $index => $tmpFileName) { 
     if ($_FILES['file']['error'][$index] > 0) { 
      $text = "A file did not uploaded correctly."; 
      return false; 
     } 

     $ch = curl_init("http://serverfiles/remoteUpload.php"); 
     curl_setopt($ch, CURLOPT_RETURNTRANSFER, true); 
     curl_setopt($ch, CURLOPT_NOPROGRESS, false); 
     curl_setopt($ch, CURLOPT_PROGRESSFUNCTION, 'progressCallback'); 
     curl_setopt($ch, CURLOPT_POST, true); 
     curl_setopt($ch, CURLOPT_POSTFIELDS, array('fileupload' => '@' . $tmpFileName)); 
     $text = curl_exec($ch); 
    } 
} 
echo json_encode(array('text' => $text)); 
exit; 

PHP: (remoteUpload.php)

if (move_uploaded_file($_FILES['fileupload']['tmp_name'], "files/" . $_FILES['fileupload']['name'])) 
    echo "The file has been uploaded."; 
else 
    echo "error"; 

cevap

2

İçeri kaydedebilirsiniz progressCallback() senin $progress$_SESSION ve setIntevral(/*ajax*/) sunucuya ajax isteklerini $_SESSION['progress] almak ve ikinci ilerleme çubuğu görüntülemek (veya% 50 kadar barr ilk ilerleme yüklemek ve ikinci% 50 yük devam yapmak "ilk adım" yayla tam yayınlandıktan sonra js taraftan) formunuzdaki ve ne zaman tam çağrı clearInterval()


AYRINTILI CEVAP

Açıklama: biz mantığı aşağıdaki ilerleme sayacaktır .bir an önce 5 yüklenmiş dosyalar varsa o zaman size 5 değişiklikler

aşağıdaki gerek bunun için, 5 tarafından 100% bölecek ve teslim kıvrılması bir dosya sırasında 25% ilerleme artacak (davanız yüklendi görünüyor gibi çoklu dosya idi) toplam dosyalar sayısı oturumda ve geçerli işlem dosyası endeksine tasarrufu

2) yapılmazsa eğer upload.php yere session_start() yukarıdaki 1) çağrı

// Saveing total amount of uploaded files 
$_SESSION['UP_total_count'] = count($_FILES['file']);  
foreach ($_FILES['file']['tmp_name'] as $index => $tmpFileName) { 
    ... 
    // Saving current index of uploaded file 
    $_SESSION['UP_current_index'] = ($index+1);//+1 as it starts from 0 
} 

3)

function progressCallback($dltotal, $dlnow, $ultotal, $ulnow) { 
    ... 
    $_SESSION['UP_current_progress'] = $progress; 
} 

4) yeni getUploadProgress.php oluşturmak ve oturumu

session_start(); 
echo json_encode(array(
    'total_count' => $_SESSION['UP_total_count'], 
    'current_index' => $_SESSION['UP_current_index'], 
    'current_progress' => $_SESSION['UP_current_progress'], 
)); 

5) eklenti gelen json kodlanmış ilerleme BİLGİ EDİNME dönmek 0-100 formatında progressCallback fonksiyonu mevcut ilerleme sayısında tasarruf ajax.onreadystatechangesetInteval numaralı fonksiyon çağrısında ve js global değişkeninizde tanımlayın progressSetInterval

.... 
var progressSetInterval = null;// Global 

ajax.onreadystatechange = function() { 
     if (ajax.readyState == 4 && ajax.status == 200) { 
      ... 
      progressSetInterval = setInterval(function(){ 
       $.ajax({ 
        type: "POST", 
        url: "getUploadProgress.php", 
        success: function(data){ 

         // Calculating progress based on 100 25 logic explained above 
         var progressPart = 100/data['total_count']; 
         var currProgress = 
          (data['total_count'] - data['current_index']) * progressPart; 

         currProgress += (progressPart/100) * data['current_progress']; 

         // You can display progress somehow, apped to div or show prgoress... 
         console.log("Second progress: " + currProgress); 

         // if currProgress is 100% removing setinterval 
         if(currProgress >= 100){ 
          clearInterval(progressSetInterval); 
         } 
        }, 
        dataType: 'json' 
       }); 
      }, 1000); 
     } 
}; 

NOT: İlave orada gerekli olacak tabii bu örnek kod kullanımı sırasındarounds, JS/PHP functions ilavesi, değişken ayarlamalar veya daha fazla etkinlik için bazı mantıksal ayarlamaları ama temelde bu bir seçenek mantığı olan seni

+1

'u kullanabilirsiniz Teşekkür ederim, ancak sözlerimi koduma nasıl ekleyebilirim? –

+0

Tamam, mümkün olduğunca eşleştirmeyi denedim, temel örnekte açıkla, sonra kodu kontrol et ** AYRINTILI CEVAP ** – Armen

+0

Ne yazık ki, ilerleme görünmez ama bitene kadar bekler ve sonra doğrudan% 100 basar. –

İlgili konular