如何將多個文件從jqGrid的laravel上傳

Question

這裏是我下面的代碼：

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

我使用ajaxFileUpload這裏是我的代碼上傳相同：

  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指的是image。 image只被挑選一次。試圖將圖像分配給images[]，就像我們從純HTML中那樣分配圖像。但仍然沒有運氣作爲ajaxFileUpload.js拋出錯誤爲images[]找不到id。

任何幫助將不勝感激。

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

你可以嘗試滾動自己的，像（未測試）：

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

然後，你可以訪問你的PHP上傳腳本文件與$_FILES['files']

否則，你可以使用插件像jQuery File Upload