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

【问题标题】：How to upload multiple files from jqgrid and Laravel?如何从 jqgrid 和 Laravel 上传多个文件？
【发布时间】：2018-04-02 06:38:37
【问题描述】：

下面是我的代码：

  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[].

【问题讨论】：

看来你使用的是phpletter的插件。在这种情况下我需要问一下使用的是哪个版本的jQuery？ ajaxFileUpload 是非常旧的插件，它不能与最新的 jquery 一起使用。您可能需要包含 migrate 插件才能使其工作。我不确定这个插件是否支持多个文件上传。只是为了测试。尝试只上传一个文件
单个文件上传工作正常，但不是多个。是的，插件似乎已经过时了，对支持处理多个上传的最新 jQuery 有什么建议吗？

标签： javascript jquery ajax laravel jqgrid

【解决方案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这样的插件

【讨论】：

这将需要更多的http调用，这并不理想
为什么更多？只需一个调用即可使用一个 ajax 调用提交一组文件。
@Mithun，我的回答只使用一个 ajax 帖子，它遍历文件并构建一个数组以发送到上传脚本。
我收到错误 @CUGreen 为：form_data => FormData {} jquery.jqGrid.min.js:9249 Uncaught TypeError: Cannot read property '0' of undefined at Object.complete (jquery.jqGrid.min.js:9249) at j (jquery-2.1.4.min.js:2) at Object.fireWith (jquery-2.1.4.min.js:2) at x (jquery-2.1.4.min.js:4) at XMLHttpRequest.<anonymous> (jquery-2.1.4.min.js:4)
你有一个 id="image" 的输入吗？

【解决方案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 数组。因此动态更改为名称数组，该数组在内部处理后端中的所有内容。

【讨论】：