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时，对于多个文件上传，我们需要名称数组。因此动态地改为名称数组，在内部处理后端的所有内容。

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

2 个答案: