javascript - leer - Mostrar un progreso en la carga de múltiples archivos Jquery/Ajax

leer xml jquery ajax

Question

Tengo formulario de carga que permite a los usuarios subir varios archivos. Decidí que una barra de progreso sería buena si los archivos son bastante grandes. A continuación se muestra mi código fuente. Soy nuevo en jquery, normalmente solo php, pero me parece que ajax es más fácil de usar.

<div id="new_upload">
    <div class="close_btn"></div>
    <div id="uploads"></div>
    <form action="global.func/file_upload.php" method="post" enctype="multipart/form-data" id="upload_file">
    <fieldset><legend>Upload an image or video</legend>
    <input type="file" id="file" name="file[]" placeholder="Upload Image or Video" multiple /><input type="submit" value="upload file" id="upload_file_btn" required />
    </fieldset>

    <div class="bar">
        <div class="bar_fill" id="pb">
            <div class="bar_fill_text" id="pt"></div>
        </div>
    </div>

    </form>
</div>
<script>
function OnProgress(event, position, total, percentComplete){    
    //Progress bar
    console.log(total);
    $(''#pb'').width(percentComplete + ''%'') //update progressbar percent complete
    $(''#pt'').html(percentComplete + ''%''); //update status text
}
function beforeSubmit(){
    console.log(''ajax start'');
}
function afterSuccess(data){
    console.log(data);
}
$(document).ready(function(e) {
    $(''#upload_file'').submit(function(event){
        event.preventDefault();
        var filedata = document.getElementById("file");
        formdata = new FormData();
        var i = 0, len = filedata.files.length, file;
         for (i; i < len; i++) {
            file = filedata.files[i];
            formdata.append("file[]", file);
        }
        formdata.append("json",true);
        $.ajax({
            url: "global.func/file_upload.php",
            type: "POST",
            data: formdata,
            processData: false,
            contentType: false,
            dataType:"JSON",
            xhr: function() {
                var myXhr = $.ajaxSettings.xhr();
                return myXhr;
            },
            beforeSubmit: beforeSubmit,
            uploadProgress:OnProgress, 
            success: afterSuccess,
            resetForm: true
        });
    });
});
</script>

La carga de la imagen funciona bien, la matriz se envía a ajax pero la barra de progreso no se mueve. De hecho, la consola.log para las dos funciones llamadas necesita producir esto tampoco aparece. ¿Existe una forma correcta de llamar a las funciones en mi solicitud de ajax que haría que esta barra de progreso funcione?

antesSubmit: beforeSubmit, uploadProgress: OnProgress, éxito: afterSuccess,

TENGA EN CUENTA que esta función ''success: afterSuccess'' está funcionando ya que la consola muestra mis datos.

Answer 1

Debe usar un XMLHttpRequest personalizado para hacer esto con AJAX y jQuery. Aquí hay un ejemplo: ¿Cómo puedo cargar archivos de forma asíncrona?

Answer 2

Este es tu formulario HTML

<form method="post" action="uploadImages.php" name =''photo'' id=''imageuploadform'' enctype="multipart/form-data">
        <input hidden="true" id="fileupload" type="file" name="image[]" multiple >

        <div id ="divleft">
            <button id="btnupload"></button>

        </div>    

    </form>

Esta es tu JQuery y Ajax. Por defecto el fileInput está oculto.

Botón de carga pulsado

$("#btnupload").click(function(e) {

    $("#fileupload").click();
    e.preventDefault();

});


$(''#fileupload'').change(function (e) {

    $("#imageuploadform").submit();
    e.preventDefault();

});

$(''#imageuploadform'').submit(function(e) {

    var formData = new FormData(this);

    $.ajax({
        type:''POST'',
        url: ''ajax/uploadImages'',
        data:formData,
        xhr: function() {
                var myXhr = $.ajaxSettings.xhr();
                if(myXhr.upload){
                    myXhr.upload.addEventListener(''progress'',progress, false);
                }
                return myXhr;
        },
        cache:false,
        contentType: false,
        processData: false,

        success:function(data){
            console.log(data);

          alert(''data returned successfully'');

        },

        error: function(data){
            console.log(data);
        }
    });

    e.preventDefault();

});


function progress(e){

    if(e.lengthComputable){
        var max = e.total;
        var current = e.loaded;

        var Percentage = (current * 100)/max;
        console.log(Percentage);


        if(Percentage >= 100)
        {
           // process completed  
        }
    }  
 }

Tu código php se ve así

<?php

header(''Content-Type: application/json'');

       $valid_exts = array(''jpeg'', ''jpg'', ''png'', ''gif''); // valid extensions
        $max_size = 30000 * 1024; // max file size in bytes

        $json = array();

            if ( $_SERVER[''REQUEST_METHOD''] === ''POST'' )
            {
                for($i=0;$i<count($_FILES[''image''][''tmp_name'']);$i++)
                {
                    $path="image/uploads/photos/";

                    if(is_uploaded_file($_FILES[''image''][''tmp_name''][$i]) )
                    {
                      // get uploaded file extension
                      $ext = strtolower(pathinfo($_FILES[''image''][''name''][$i], PATHINFO_EXTENSION));
                      // looking for format and size validity
                          if (in_array($ext, $valid_exts) AND $_FILES[''image''][''size''][$i] < $max_size)
                          {
                                  // unique file path
                                  $uid = uniqid();
                                  $date = date(''Y-m-d-H-i-s'');
                                  $path = $path ."image_" .$date. ''_'' . $uid . "." .$ext;

                                  $returnJson[]= array("filepath"=>$path);

                                  $filename = "image_" . $date . "_" .$uid . "." . $ext;
                                  $this->createthumb($i,$filename);

                                    // move uploaded file from temp to uploads directory
                                  if (move_uploaded_file($_FILES[''image''][''tmp_name''][$i], $path))
                                  {
                                    //$status = ''Image successfully uploaded!'';
                                      //perform sql updates here

                                  }
                                  else {
                                    $status = ''Upload Fail: Unknown error occurred!'';
                                  }


                          }
                          else {
                            $status = ''Upload Fail: Unsupported file format or It is too large to upload!'';
                          }
                    }
                    else {
                      $status = ''Upload Fail: File not uploaded!'';
                    }
                }
              }
            else {
              $status = ''Bad request!'';
            }


            echo json_encode($json);

?>