使用 Summernote File 一次将多个文件上传到服务器

Posted 2023-03-22

【中文标题】使用 Summernote File 一次将多个文件上传到服务器

【英文标题】：Upload multiple files at once to server with Summernote File

【发布时间】：2021-06-29 11:58:33

【问题描述】：

请问，我可以对下面的代码进行哪些更改，以便我的upload.php 文件可以接收多个文件，我会让他们循环处理这些文件？我一直在尝试使用 Summernote 一次将多个文件上传到服务器。虽然，我从笔记本电脑中选择了多个文件进行上传，但只有一个文件被上传。我确信处理上传的 PHP 文件不是问题，因为即使我选择多个文件进行上传，它也只接收一个文件。下面是 JQuery 代码的样子

$('.summernote-mini').summernote(
    height: 200,
    tabsize: 2,
    callbacks: 
        onFileUpload: function(files) 
            callBack(files[0]);
        ,
    
);

回调函数

function callBack(files) 
    
    let data = new FormData();
    data.append('media_upload[]', files);
    $.ajax(
        data: data,
        type: "POST",
        url: "upload.php",
        cache: false,
        contentType: false,
        processData: false,
        xhr: function()  //Handle progress upload
            let myXhr = $.ajaxSettings.xhr();
            if (myXhr.upload) myXhr.upload.addEventListener('progress', progressHandlingFunction, false);
            return myXhr;
        
        
    ).done(function(reponse)
        
        //I handle the response here
        
    );

无论我选择上传多少个文件，count($_FILES['media_upload']['name']) 在我的例如处理服务器端文件上传的upload.php 文件中都会给我1。有什么办法可以解决这个问题？

【问题讨论】：

您想要构建一个包含所有选定文件的 POST 请求吗？不过，Summernote 会为每个文件发送一个 POST 请求，因为每个新文件都会调用回调。

我想知道我是否可以对代码进行哪些更改，以便它将我选择的所有文件发送到 PHP 上传文件而不是只发送 1

是的，我想构建一个包含所有选定文件的 POST 请求

那么，您的<input type=file> 是否具有multiple 属性？还是要一一选择文件？

是的，我的<input type=file> 有多个属性，所以目前我可以选择多个文件。

【参考方案1】：

在得到@Fravadona 的帮助后，我得到了问题的解决方案。 我按照@Fravadona 的建议将callBack(files[0]); 替换为callBack(files);。

然后，在回调函数中，我将 data.append('media_upload[]', files);替换为以下代码：

var iLength = files.length;

var i;
for(i = 0; i < iLength; i++)
    data.append("media_upload[]", files[i]);

所以正确的代码变成了这样：

$('.summernote-mini').summernote(
    height: 200,
    tabsize: 2,
    callbacks: 
        onFileUpload: function(files) 
        callBack(files);
        ,
    
);

而回调函数变成了这样：

function callBack(files) 

    let data = new FormData();
    var iLength = files.length;

    var i;
    for(i = 0; i < iLength; i++)
        data.append("media_upload[]", files[i]);
    
    $.ajax(
        data: data,
        type: "POST",
        url: "upload.php",
        cache: false,
        contentType: false,
        processData: false,
        xhr: function()  //Handle progress upload
            let myXhr = $.ajaxSettings.xhr();
            if (myXhr.upload) myXhr.upload.addEventListener('progress', progressHandlingFunction, false);
            return myXhr;
        
    
    ).done(function(reponse)
    
        //I handle the response here
    
    );

所以现在，我可以使用 Summmernote 一次成功上传多个文件。