Сообщение non-ajax с использованием Dropzone.js

Ответ 1

Нет. Из соображений безопасности вы не можете вручную установить значение <input type='file'>. Когда вы используете функции перетаскивания Javascript, вы полностью превосходите входной файл. Как только файл извлекается с пользовательского компьютера, единственный способ отправить файл на сервер - через AJAX.

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

var base64Image;
var reader  = new FileReader();
reader.addEventListener("load", function () {
    base64Image = reader.result;
    // append the base64 encoded image to a form and submit
}, false);
reader.readAsDataURL(file);

Возможно, вы используете dropzone.js, потому что входы файлов уродливы и сложны в стиле? Если это так, этот вариант Dropzone.js может сработать для вас. Он позволяет создавать пользовательские вложенные входы, которые могут быть отправлены с формой. Он также поддерживает перетаскивание, но с перетаскиванием вы не можете отправить форму так, как хотите. Отказ от ответственности: я являюсь автором вышеупомянутой библиотеки.

Ответ 2

Итак, если я правильно понял, вы хотите добавить некоторые данные (input = file), прежде чем отправить свою форму, у которой активирована dropzone, правильно?

Если это так, мне пришлось сделать почти то же самое, и я получил это через прослушивание. Если вы просто загружаете один файл, вы должны прослушать событие "отправка", но если вы хотите включить несколько загрузок, вы должны прослушать "отправку нескольких". Вот фрагмент моего кода, который я использовал для выполнения этой работы:

Dropzone.options.myAwesomeForm = {
  acceptedFiles: "image/*",
  autoProcessQueue: false,
  uploadMultiple: true,
  parallelUploads: 100,
  maxFiles: 100,

  init: function() {
    var myDropzone = this;

    [..some code..]

    this.on("sendingmultiple", function(files, xhr, formData) {
      var attaches = $("input[type=file]").filter(function (){
        return this.files.length > 0;
      });

      var numAttaches = attaches.length;

      if( numAttaches > 0 ) {
        for(var i = 0; i < numAttaches; i++){  
          formData.append(attaches[i].name, attaches[i].files[0]);
          $(attaches[i]).remove();
        }
      }
    });

    [..some more code..]

  }
}

И что это. Надеюсь, вы сочтете это полезным:)

PS: Извините, если есть грамматические ошибки, но английский не мой родной язык

Ответ 3

Для будущих посетителей Я добавил это к вариантам dropzone:

addedfile: function (file) {
            var _this = this,
                    attachmentsInputContainer = $('#attachment_images');
            file.previewElement = Dropzone.createElement(this.options.previewTemplate);
            file.previewTemplate = file.previewElement;
            this.previewsContainer.appendChild(file.previewElement);
            file.previewElement.querySelector("[data-dz-name]").textContent = file.name;
            file.previewElement.querySelector("[data-dz-size]").innerHTML = this.filesize(file.size);
            if (this.options.addRemoveLinks) {
                file._removeLink = Dropzone.createElement("<a class=\"dz-remove\" href=\"javascript:undefined;\">" + this.options.dictRemoveFile + "</a>");
                file._removeLink.addEventListener("click", function (e) {
                    e.preventDefault();
                    e.stopPropagation();
                    if (file.status === Dropzone.UPLOADING) {
                        return Dropzone.confirm(_this.options.dictCancelUploadConfirmation, function () {
                            return _this.removeFile(file);
                        });
                    } else {
                        if (_this.options.dictRemoveFileConfirmation) {
                            return Dropzone.confirm(_this.options.dictRemoveFileConfirmation, function () {
                                return _this.removeFile(file);
                            });
                        } else {
                            return _this.removeFile(file);
                        }
                    }
                });
                file.previewElement.appendChild(file._removeLink);
            }
            attachmentsInputContainer.find('input').remove();
            attachmentsInputContainer.append(Dropzone.instances[0].hiddenFileInput).find('input').attr('name', 'files');
            return this._updateMaxFilesReachedClass();
        },

Это стандартная реализация опции dropzone добавленный файл с тремя вставками.

Объявленная переменная attachmentsInputContainer. Это невидимый блок. Что-то вроде

<div id="attachment_images" style="display:none;"></div>

Здесь я храню будущий ввод с выбранными изображениями Затем в конце функции удалите ранее добавленный ввод (если есть) из блока и добавьте новый

attachmentsInputContainer.find('input').remove();
attachmentsInputContainer.append(Dropzone.instances[0].hiddenFileInput).find('input').attr('name', 'files');

И теперь, когда вы отправляете форму через простую кнопку отправки, будут отправляться input [name= "files" ] со значениями.

Я сделал этот взлом, потому что добавляю файлы для публикации, которые, возможно, еще не созданы

Ответ 4

Это то, что я использовал для моих прошлых проектов,

function makeDroppable(element, callback) {

var input = document.createElement('input');

input.setAttribute('type', 'file');

input.setAttribute('multiple', true);

input.style.display = 'none';

input.addEventListener('change', triggerCallback);

element.appendChild(input);

element.addEventListener('dragover', function(e) {

e.preventDefault();

e.stopPropagation();

element.classList.add('dragover');
});

element.addEventListener('dragleave', function(e) {

e.preventDefault();

e.stopPropagation();

element.classList.remove('dragover');
});

element.addEventListener('drop', function(e) {

e.preventDefault();

e.stopPropagation();

element.classList.remove('dragover');

triggerCallback(e);
});

element.addEventListener('click', function() {
input.value = null;
input.click();
});

function triggerCallback(e) {

  var files;

  if(e.dataTransfer) {

  files = e.dataTransfer.files;

} else if(e.target) {

  files = e.target.files;
}
callback.call(null, files);
}
}