如何从 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){
        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

这样的插件

Answer 2

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

由于jqgrid是动态创建id和name的，对于多文件上传，我们需要name数组。因此动态更改为名称数组，在内部处理后端中的所有内容。

如何从 jqgrid 和 Laravel 上传多个文件？

How to upload multiple files from jqgrid and Laravel?

javascript

ajax

jquery

jqgrid

laravel