Question

我以非正常的方式获取文件及其值。表单中没有实际输入。因此，我正在尝试将文件追加到formData中以进行Ajax提交。

每当我尝试使用以下方法提交表单时，我的文件都不会上传。因此，我添加文件的方式必须不正确。

有人告诉我以下内容，但我不知道该怎么做：

您正在遍历数组，但是每个数组都附加了整个数组通过循环的时间。使用表格输入名称上的方括号和将每个文件附加到数组中。

有人看到我需要进行更改才能使其正常工作吗？

Dropzone的代码...在以下相关代码之前：

var dragFileName = '';

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(count + " is the length");
            //console.log("FILEname is " + dragFileName);
            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());
        });
        */
    }
});

相关代码：

var acceptedFiles = null;
var allAcceptFiles = null;

function toggleUploadButton() {
    acceptedFiles = myDropzone.getAcceptedFiles();
    allAcceptFiles = acceptedFiles.values();

    for (let fileElements of allAcceptFiles) {
        console.log(fileElements);
    }
}

function submit(){
    var form = document.getElementById("salesforce_submit");
    var formData = new FormData(form);
    fileElements.each(function() {
        formData.append('uploadedFile[]', fileElements);
    });
    alert(formData);

    $.ajax({
        url: '/php/quoteSendTest.php',
        type: 'POST',
        data: formData,

HTML：

<form action="<?php echo $config['sf_url']; ?>" method="POST" id="salesforce_submit">
    <input id="first_name" name="first_name" type="text">
    <div class="dropzone dz-clickable" id="myDropzone">
        <div class="dz-default dz-message dG">Drop files here or click to upload</div>
    </div>
    <button type="submit" id="submit-all">SEND PROJECT QUOTE</button>
</form>

fileElements中的Console.log信息：

文件{上传：{…}，状态：“已排队”，previewElement：

div.dz-preview.dz-文件-预览，previewTemplate：

div.dz-preview.dz-file-preview，_removeLink：a.dz-remove，...}已接受：

true dataURL：“ data：image / png; base64，iVBORw0KGgoAAAANSUhEUgAABtUA”

高度：892 lastModified：1512405192880 lastModifiedDate：周一12月4日

2017 11:33:12 GMT-0500（东部标准时间）{}名称：

“ analytics.PNG”预览元素：div.dz-preview.dz-image-preview

previewTemplate：div.dz-preview.dz-image-preview大小：544438状态：

“已排队”类型：“ image / png”上传：{uuid：   “ 6dc946e7-e9db-4b3a-88af-b790de1c2975”，进度：0，总计：544438，   发送的字节数：0，文件名：“ analytics.PNG”，…} webkitRelativePath：“”

宽度：1749

_removeLink：a.dz-删除

原始：文件

Answer 1

您的初次尝试：

function toggleUploadButton() {
    acceptedFiles = myDropzone.getAcceptedFiles();
    allAcceptFiles = acceptedFiles.values();

    for (let fileElements of allAcceptFiles) {
        console.log(fileElements);
    }
}

var formData = new FormData(form);
fileElements.each(function() {
    formData.append('uploadedFile[]', fileElements);
});

您正在遍历allAcceptFiles并将每个都设置为fileElements。这样会将fileElements保留为单个文件，并且以后尝试执行each循环时，它将无法按预期运行。

我注意到myDropzone必须在某个地方定义，因为它在第一个函数中起作用。看着dropzone documentation，我看到它有一个getAcceptedFiles方法，您可以轻松地使用它遍历并将每个文件添加到表单数据中。修改后的循环如下：

var formData = new FormData(form);
myDropzone.getAcceptedFiles().forEach(file => {
    formData.append("uploadedFile[]", file); 
});

代码中似乎还没有其他一些必要的东西，但这不是代码审查，因此我将不理它们。

如何将文件追加到formData

1 个答案: