1

$ .ajax(jquery)とファイルアップローダーのphpで動作するプログレスバーを作成しようとしていますが、それを組み立てる方法がわかりません。jQueryUIで動作するプログレスバーがあることは知っています。ただし、値を受け取っている間に変化するだけです。そしてそれがポイントです。アップロードされたバイトの動的な値を取得するにはどうすればよいですか?

ちなみに、これは私のコードです:


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になります。

4

2 に答える 2

2

ほぼ一日中調査した結果、思い通りの成果を上げました。

JQUERYフォームプラグインと呼ばれるこのプラグインを見つけました。[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-04T16:48:14.690 に答える
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 に答える