Как добавить файлы в formData - PullRequest
Новая
       16

Как добавить файлы в formData

0 голосов
/ 23 октября 2019

Я получаю файлы и их значения ненормальным способом. Там нет фактического ввода в форме. Поэтому я пытаюсь добавить файлы в formData для отправки в формате ajax.

Каждый раз, когда я пытаюсь отправить форму с помощью метода, описанного ниже, мои файлы не загружаются. Поэтому способ добавления файлов должен быть неправильным.

Мне кто-то сказал следующее, но я не могу понять, как это сделать:

Вы 'повторяет цикл по массиву, но добавляет весь массив каждый раз через цикл. Используйте квадратные скобки в имени для ввода формы и добавьте каждый файл в массив.

Кто-нибудь видит, что мне нужно изменить, чтобы это работало?

Код для зоны сброса. .. перед соответствующим кодом ниже: 

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>

Информация Console.log из файла Элементы:

Файл {upload: {…}, статус: «в очереди», элемент preview:

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

div. dz-preview.dz-file-preview, _removeLink: a.dz-remove,…} принято:

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

высота:892 lastModified: 1512405192880 lastModifiedDate: Mon Dec 04

2017 11:33:12 GMT-0500 (восточное стандартное время) {} name:

Предварительный просмотр "analytics.PNG" Элемент: div.dz-preview.dz-image-preview

previewTemplate: div.dz-preview.dz-image-preview Размер: 544438 Статус:

Тип "в очереди": "image / png" upload: {uuid: "6dc946e7-e9db-4b3a-88af-b790de1c2975 ", прогресс: 0, всего: 544438, отправлено байтов: 0, имя файла:" analytics.PNG ",…} webkitRelativePath:" "

ширина: 1749

_removeLink: a.dz-remove

proto : Файл

1 Ответ

1 голос
/ 23 октября 2019

При первой попытке: 

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 , я обнаружил, что у нее есть метод getAcceptedFiles, который можно легко использовать для циклического просмотра и добавления каждого файла в данные формы. Модифицированный цикл приведен ниже: 

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

Есть пара других вещей, которые не кажутся необходимыми в коде, но это не проверка кода, поэтому я оставлю их в покое.

...