Dropzone getAcceptedFiles() 产生 [object File] 而不是 file

Posted 2023-05-08

【中文标题】Dropzone getAcceptedFiles() 产生 [object File] 而不是 file

【英文标题】：Dropzone getAcceptedFiles() producing [object File] instead of file

【发布时间】：2020-02-04 22:13:38

【问题描述】：

我添加了以下函数以尝试将一组文件名放入放置区：

function toggleUploadButton() 
    console.log(myDropzone.getAcceptedFiles() + "Accepted Files"); // []
    console.log(myDropzone.getQueuedFiles() + "Queued Files");  // []
    console.log(myDropzone.getRejectedFiles() + "Rejected Files");  // [File] <- same as above

但是，console.log 中的输出会产生：

[object File],[object File],

而不是文件名本身。

基本上我要做的是获取文件信息，以便我可以通过我的代码的不同部分通过 ajax 将其发送到上传。

[object File] 是否会保留上传的所有基本文件信息，还是需要采用不同的结构？

var myDropzone = new Dropzone("#myDropzone", 
    //$('#myDropzone').dropzone (
    //Dropzone.options.myDropzone= 
        url: 'php/quoteSendTest.php',
        autoProcessQueue: false,
        paramName: "file",
        uploadMultiple: true,
        parallelUploads: 5,
        maxFiles: 5,
        maxFilesize: 25,
        acceptedFiles: 'image/*',
        addRemoveLinks: true,
        dictFileTooBig: 'File is larger than 25MB',
        init: function() 
            dzClosure = this; // Makes sure that 'this' is understood inside the functions below.

            // for Dropzone to process the queue (instead of default form behavior):
            document.getElementById("submit-all").addEventListener("click", function(e) 
                // Make sure that the form isn't actually being sent.
                console.log("Something should be showing for eventListener");
                //e.preventDefault();
                e.stopPropagation();
                dzClosure.processQueue();
            );

            this.on("addedfile", function(file) 
                /* Maybe display some more file information on your page */
                dragFileName = file.name;
                var dragFileSize = file.size;
                var count = myDropzone.files.length;
                console.log('File added - ' + file.name + ' - Size - ' + file.size);
                //console.log(dragFileName[]);
                console.log(count + " is the length");
                //toggleUploadButton();
                setTimeout(function () 
                    toggleUploadButton();
                , 10);
            );

            //send all the form data along with the files:
            this.on("sendingmultiple", function(data, xhr, formData) 
                formData.append("firstname", jQuery("#firstname").val());
                formData.append("lastname", jQuery("#lastname").val());
            );
        
    );
    function toggleUploadButton() 
        console.log(myDropzone.getAcceptedFiles() + "Accepted Files"); // []
        console.log(myDropzone.getQueuedFiles() + "Queued Files");  // []
        console.log(myDropzone.getRejectedFiles() + "Rejected Files");  // [File] <- same as above
    

【参考方案1】：

试试这个：

$.map(myDropzone.getAcceptedFiles(), function(file) return file.name ).join(', ');

或者，将return 格式化为您要显示给用户的 html：

$.map(myDropzone.getAcceptedFiles(), function(file) return '<span>'+file.name+'</span>' ).join('');