1

我正在尝试制作一个与 $.ajax(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;
});`

上传.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 将。

4

2 回答 2

2

看看这个页面： 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-03T21:56:36.700 回答
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);
});

上传.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-04T16:48:14.690 回答