Question

我正在尝试创建一个与$ .ajax（jquery）和php一起使用的进度条，用于文件上传器，但我不知道如何组装它。我知道有一个使用jQuery UI的进度条;然而，它只是在接收价值时改变。这就是重点。如何获得上传字节的dinamic值？

顺便说一句，这是我的代码：

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＆amp; PHP将是。

Answer 1

查看此页面： 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);

Answer 2

经过几乎整天的调查，我实现了我想要的目标。

我发现这个名为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>

$ .ajax和php的进度条

2 个答案: