用$就和PHP

進度條我試圖做一個進度條與$阿賈克斯（jQuery的）和PHP工程文件上傳，但我不知道如何組裝。我知道有一個使用jQuery UI的進度條;如何，它只是在接收價值時改變。這就是要點。我怎樣才能獲得字節數量的動態值？

順便說一句，這是我的代碼：

fx_file.js

/*This function gets Data from the form and send it to server*/ 
function fiEnviarDatos2(){ 
    $("form#data").click(function(){ 
      /*Some DOM'S animations*/ 
    }); 

    $("form#data").submit(function(){ 

    var formData = new FormData($(this)[0]); 

    $.ajax({ 
     url: "PHP/Core/Archivos/upload.php", 
        type: 'POST', 
        data: formData, 
        async: false, 
        success: function (data) { 

         /*After actions**/ 

        }, 
        progress:function(data){ 
         alert(data); 
        }, 
        cache: false, 
        contentType: false, 
        processData: false 
    }); 
return false; 
});`

upload.php的

<?php include ("Class_upload.php"); 

/*Variables*/ 
$i=0; 
$archivos=0; 

/*Contains numbers of file sent*/ 
$archivos=((count($_FILES,1)-6)/5); 

/*Contains the user's session name*/ 
session_start(); 
$sUsuario=$_SESSION['usuario']; 

/*Use the information of each file to create a new class Upload*/ 
for($i=0;$i<$archivos;$i++){ 

    /*FileSize*/ 
    $tamaArchivo = $_FILES['formUploader']['size'][$i]; 

    /*Filename*/ 
    $nombArchivo = strtolower($_FILES['formUploader']['name'][$i]); 

    /*Filetemp*/ 
    $tmpArchivo = $_FILES['formUploader']['tmp_name'][$i]; 

    /*It creates class Upload*/ 
    $archivo_subir=new Upload($nombArchivo,$tamaArchivo,$tmpArchivo,$sUsuario); 

    /*It validates each file and returns a status*/ 
    $estatus=$archivo_subir->enviarData(); 

    /*Returns if file's been uploaded or not*/ 
    $resultFile=$archivo_subir->resultFile($estatus); 
    echo "<br>"; 
    if($estatus>0){ 
     echo "<div class='resultDeny'>".$resultFile."</div>"; 
    }else{ 
     if($resultFile=="ServerError"){ 
      echo "<div class='resultServer'>".$resultFile."</div>"; 
     }else{ 
      echo "<div class='resultSuccess'>".$resultFile."</div>"; 
     } 

    } 

}

我希望我能找到一些你的幫助，夥計們。我知道你們都是專家。我是新的與jQuery和PHP的工作;然而，我已經看到「他們的力量在一起」，我想了解更多關於他們。

謝謝大家。

PDT：對不起，我的英語，這不是我的母語。 JQ & PHP會。

來源

2013-02-03 Leo

你使用支持上傳進度的選項？無論是5.4或APC？ – datasage

我不知道如何使用jQuerry實現這一點，但上傳狀態的回調是'HTTPRequest.upload。onprogress'。回調函數獲取'event'作爲第一個參數，並且百分比進度以這種方式獲得：'event.loaded * 100/event.total'。 –

嘿，謝謝你的回答。那麼，我使用PHP 5.4，它影響什麼？ – Leo

查看此頁面出來： http://www.johnboy.com/php-upload-progress-bar/

http://www.johnboy.com/php-upload-progress-bar/upload_frame.phps 基本上

 function(data) //return information back from jQuery's get request 
     { 
      $('#progress_container').fadeIn(100); //fade in progress bar  
      $('#progress_bar').width(data +"%"); //set width of progress bar based on the $status value (set at the top of this page) 
      $('#progress_completed').html(parseInt(data) +"%"); //display the % completed within the progress bar 
     } 
    )},500);

來源

2013-02-03 21:56:36

是的，謝謝你的回答Willian，昨天我看到你的例子，同時尋找一些信息;然而，爲了使用它，我必須使用$ .get而不是$ .ajax。我想如果我改變發送數據的協議可能會導致更多的問題。：/ – Leo

幾乎整天都經過調查，我取得了我想要的東西。

我發現這個名爲JQUERY Form Plugin的插件。 [http://malsup.com/jquery/form/][1]

也許你們中有些人使用過它。它擁有幾乎所有內置一個進度必要的選項和之前並提交表單後引進的代碼。

因此，檢查出來。也許有人認爲它有用

順便說一句，這是我的代碼看起來像現在

accountUser.html

<html> 
//... 

...// 
<style> 

form { display: block; margin: 20px auto; background: #eee; border-radius: 10px; padding: 15px } 
.progress { position:relative; width:400px; border: 1px solid #ddd; padding: 1px; border-radius: 3px; margin-top:-200px } 
.bar { background-image:url(Imagenes/index/pbar-ani.gif); width:0%; height:20px; border- radius: 3px; } 
.percent { position:absolute; display:inline-block; top:3px; left:48%; } 

</style> 

<script language="javascript" src="Scripts/jquery_min_1.8.js"></script> 
<script language="javascript" src="Scripts/fx_file.js"></script> 
<script language="javascript" src="Scripts/jquery.form.js"></script> 

//... 

..// 
<form action="#" method="post" enctype="multipart/form-data" id="formu"> 
    <input name="formUploader[]" type="file" multiple id="archivo"/> 
    <input class="button" type="submit" alt="Upload" value="Subir" id="btn_cargar"/> 
</form> 

<div class="progress"> 
    <div class="bar"></div > 
    <div class="percent">0%</div > 
</div> 

//... 

..// 
</html>

fx_file.js

$(document).ready(function() { 


     // prepare Options Object 
     var bar = $('.bar'); 
     var percent = $('.percent'); 
     var status = $('#status'); 

     var options = { 
      url: "upload.php", 
      type: 'POST', 
      uploadProgress: function(event, position, total, percentComplete) { 
       var percentVal = percentComplete + '%'; 
       $(bar).animate({width:percentVal}); 
       percent.html(percentVal); 

      }, 
      success: function(data){ 

        //After actions 

      } 
     }; 
     // bind 'formu' and provide a simple callback function 
     $('#formu').ajaxForm(options); 
});

upload.php的

<?php include ("Class_upload.php"); 

/*Variables*/ 
$i=0; 
$archivos=0; 

/*Contains numbers of file sent*/ 
$archivos=((count($_FILES,1)-6)/5); 

/*Contains the user's session name*/ 
session_start(); 
$sUsuario=$_SESSION['usuario']; 

/*Use the information of each file to create a new class Upload*/ 
for($i=0;$i<$archivos;$i++){ 

     /*FileSize*/ 
     $tamaArchivo = $_FILES['formUploader']['size'][$i]; 

     /*Filename*/ 
     $nombArchivo = strtolower($_FILES['formUploader']['name'][$i]); 

     /*Filetemp*/ 
     $tmpArchivo = $_FILES['formUploader']['tmp_name'][$i]; 

     /*It creates class Upload*/ 
     $archivo_subir=new Upload($nombArchivo,$tamaArchivo,$tmpArchivo,$sUsuario); 

     /*It validates each file and returns a status*/ 
     $estatus=$archivo_subir->enviarData(); 

     /*Returns if file's been uploaded or not*/ 
     $resultFile=$archivo_subir->resultFile($estatus); 
     echo "<br>"; 

     if($estatus>0){ 
      echo "<div class='resultDeny'>".$resultFile."</div>"; 
     }else{ 
     if($resultFile=="ServerError"){ 
      echo "<div class='resultServer'>".$resultFile."</div>"; 
     }else{ 
      echo "<div class='resultSuccess'>".$resultFile."</div>"; 
     } 

     } 

}//End For 

<?php>

來源

2013-02-04 16:48:14 Leo

回答

相關問題