javascript - 如何将文件附加到 formData

Question

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

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

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

You're looping through the array but appending the entire array every time through the loop. Use the brackets on the form input name and append each file in the array.

有人知道我需要更改什么才能使其正常工作吗？

拖放区代码...在下面的相关代码之前:

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 信息:

File {upload: {…}, status: "queued", previewElement:

div.dz-preview.dz-file-preview, previewTemplate:

div.dz-preview.dz-file-preview, _removeLink: a.dz-remove, …} accepted:

true dataURL: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABtUA"

height: 892 lastModified: 1512405192880 lastModifiedDate: Mon Dec 04

2017 11:33:12 GMT-0500 (Eastern Standard Time) {} name:

"analytics.PNG" previewElement: div.dz-preview.dz-image-preview

previewTemplate: div.dz-preview.dz-image-preview size: 544438 status:

"queued" type: "image/png" upload: {uuid: "6dc946e7-e9db-4b3a-88af-b790de1c2975", progress: 0, total: 544438, bytesSent: 0, filename: "analytics.PNG", …} webkitRelativePath: ""

width: 1749

_removeLink: a.dz-remove

proto: File

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); 
});

还有一些其他内容在代码中似乎不是必需的，但这不是代码审查，因此我将不理会它们。