Làm thế nào để upload nhiều file từ laravel jqGrid

Question

Đây là mã của tôi dưới đây:

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"}} 
     } 
    ]; 

Tôi đang sử dụng ajaxFileUpload và đây là mã của tôi để tải lên cùng:

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

fileElementId này được đề cập đến image. Trường hợp image chỉ được chọn một lần. Đã cố gán hình ảnh cho images[] khi chúng tôi làm hình ảnh từ HTML thuần túy. Nhưng vẫn không có may mắn như lỗi ném ajaxFileUpload.js như id không tìm thấy với images[].

Mọi trợ giúp sẽ được đánh giá cao.

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

Bạn có thể thử cán của riêng bạn, một cái gì đó tương tự (không kiểm tra):

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]; 
} 
... 

Sau đó, bạn có thể truy cập các tập tin trong upload script php của bạn với $_FILES['files']

Nếu không, bạn có thể sử dụng một plugin như jQuery File Upload