Zeige einen Fortschritt beim Upload mehrerer Dateien Jquery/Ajax

Question

Ich habe Upload-Formular, mit dem Benutzer mehrere Dateien hochladen können. Ich entschied, dass ein Fortschrittsbalken gut wäre, wenn die Dateien ziemlich groß sind. Unten ist mein Quellcode. Ich bin neu in jquery normalerweise würde ich nur php, aber ich finde, dass Ajax benutzerfreundlicher ist.

Die Bild-Upload funktioniert gut, das Array an AJAX senden, aber der Fortschrittsbalken bewegt sich nicht. Tatsächlich erscheint die console.log für die beiden aufgerufenen Funktionen auch nicht. Gibt es eine korrekte Möglichkeit, die Funktionen in meiner Ajax-Anforderung aufzurufen, die diesen Fortschrittsbalken zum Funktionieren bringen würde.

beforeSubmit: beforeSubmit, upload: OnProgress, Erfolg: afterSuccess,

beachten, dass dieser Erfolg: afterSuccess 'Funktion arbeitet wie die Konsole meine Daten anzeigt.

Answer 1

Das ist Ihr HTML-Formular

<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> 

Das ist Ihre JQuery und AJAX. Standardmäßig ist der FileInput ausgeblendet.

Upload-Button geklickt

$("#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 
     } 
    } 
} 

Ihr PHP-Code wie dies

<?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); 

?> 

Answer 2

Sie müssen eine benutzerdefinierte XMLHttpRequest verwenden, um dies mit AJAX und jQuery zu tun. Es gibt hier ein Beispiel: How can I upload files asynchronously?