Comment télécharger plusieurs fichiers de Laravel jqGrid

Question

Voici mon code ci-dessous:

let colNames = ['ID', 'Image', 'Title', 'Description']; 
    let colModel = [     
      {name: 'id', index: 'id', width: 30, editable: true, editoptions: {size: "30", maxlength: "50"}},     
      { 
       name: 'image', 
       index: 'image', 
       align: 'left', 
       editable: true, 
       edittype: 'file', 
       editoptions: { 
        multiple: true, 
        accept: ".jpg,.png,.jpeg", 
        enctype: "multipart/form-data" 
       }, 
       width: 210, 
       align: 'center', 
       formatter: imageFormatter, 
       search: false 
      }, 
      {name: 'image_title', index: 'image_title', width: 150, editable: true, editoptions: {size: "30", maxlength: "50"}}, 
      {name: 'image_description', index: 'image_description', width: 150, editable: true, editoptions: {size: "30", maxlength: "50"}} 
     } 
    ]; 

J'utilise ajaxFileUpload et voici mon code pour télécharger le même:

  afterSubmit: function (response) { 
        if(response.responseJSON){ 
         $.ajaxFileUpload({ 
           url: fileuploadUrl, 
           secureuri:false, 
           fileElementId:'image', 
           dataType: 'json', 
           success: function (data, status) { 
            alert("Upload Complete."); 
           } 
          }); 
        }   
        return [true]; 
       } 
      }, 

Ce fileElementId fait référence à image. Où image est sélectionné une seule fois. Essayé d'attribuer l'image à images[] comme nous le faisons à partir de HTML brut. Mais toujours pas de chance comme erreur de lancement ajaxFileUpload.js comme ID introuvable avec images[].

Toute aide serait grandement appréciée.

Answer 1

afterSubmit: function (response) { 
    if(response.responseJSON){ 
     // Simple change here 
     $('#image').attr('name', 'images[]'); 
     $.ajax({ 
      url: 'upload_files.php', // your php upload script 
      dataType: 'text', // what to expect back from the php upload script 
      cache: false, 
      contentType: false, 
      processData: false, 
      data: { 
       rowId: rowId, 
       _token: $('meta[name="csrf-token"]').attr('content')         
      }, 
      fileElementId:'image', 
      type: 'post', 
      success: function (response) { 
       alert("Upload Complete."); 
      }, 
      error: function (response) { 
       // handle any errors 
      } 
     }); 
    }   
    return [true]; 
} 

As jqgrid dynamically creates id and name, for multiple file uploads, we need array of name. Hence dynamically changed to array of name which internally handles everything in the backend.

Answer 2

Vous pouvez essayer rouler votre propre, quelque chose comme (non testé):

afterSubmit: function (response) { 
    if(response.responseJSON){ 
     var form_data = new FormData(); 
     var count = document.getElementById('image').files.length; // assuming your file input names is image 
     for (var x = 0; x < count; x++) { 
      form_data.append("files[]", document.getElementById('image').files[x]); 
     } 
     $.ajax({ 
      url: 'upload_files.php', // your php upload script 
      dataType: 'text', // what to expect back from the php upload script 
      cache: false, 
      contentType: false, 
      processData: false, 
      data: form_data, // data created above 
      type: 'post', 
      success: function (response) { 
       alert("Upload Complete."); 
      }, 
      error: function (response) { 
       // handle any errors 
      } 
     }); 
    }   
    return [true]; 
} 
... 

Ensuite, vous pouvez accéder aux fichiers dans votre script d'upload php avec $_FILES['files']

Sinon, vous pouvez utiliser un plugin comme jQuery File Upload