javascript - 如何从 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 抛出错误，因为 id not found with images[]。

Answer 1

您可以尝试自己滚动，例如(未测试):

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

然后您可以使用 $_FILES['files']

访问您的 php 上传脚本中的文件

否则你可以使用像jQuery File Upload这样的插件