Как сделать только Dropzone.JS Previews Div кликабельна, а не вся форма

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

мой код dropzone выглядит так -->

Dropzone.options.mydropzone = {
  maxFiles: 1,
  maxFilesize: 10, //mb
  acceptedFiles: 'image/*',
  addRemoveLinks: true,
  autoProcessQueue: false,// used for stopping auto processing uploads
  autoDiscover: false,
  paramName: 'prod_pic',
  previewsContainer: '#dropzonePreview', //used for specifying the previews div
  clickable: false, //used this but now i cannot click on previews div to showup the file select dialog box

  accept: function(file, done) {
    console.log("uploaded");
    done();
   //used for enabling the submit button if file exist 
    $( "#submitbtn" ).prop( "disabled", false );
  },

  init: function() {
    this.on("maxfilesexceeded", function(file){
        alert("No more files please!Only One image file accepted.");
        this.removeFile(file);
    });
      var myDropzone = this;
    $("#submitbtn").on('click',function(e) {
       e.preventDefault();
       myDropzone.processQueue();

    });

       this.on("reset", function (file) {   
              //used for disabling the submit button if no file exist 
              $( "#submitbtn" ).prop( "disabled", true );
        });

  }

};

но я хочу сделать только предварительный просмотр контейнера как кликабельным, так и перетаскиванием, которое я установил с помощью previewsContainer: '#dropzonePreview' , но не вся форма.

Если я использую clickable:false Я не смогу нажать на previews div, чтобы показать диалоговое окно загрузки файла, а также, Даже если я перетаскиваю n поместите файл в любом месте формы, которую он принимает. Я не хочу, чтобы это произошло, я просто хочу, чтобы контейнер предварительного просмотра был перетаскиванием n drop и кликабельный, но в то же время, если я нажму на Отправить, вся форма должна быть загружена.

Я прочитал этот учебник dropzone объединить нормальную форму с Dropzone но это только половина того, что я на самом деле хочу делать.

есть ли способ достичь всего этого с помощью Dropzone эффективно ?.

3 ответов


Я работал над этим, а также и, наконец, наткнулся на ответ на загрузки страница.

ключ установка clickable: опция туда, где вы хотите, чтобы ваша активная область Dropzone быть. Используя Ваш пример, если вы хотите, чтобы область предварительного просмотра также была областью перетаскивания/щелчка, установите clickable:'#dropzonePreview', и это сделает эту область активной. Если вы хотите, чтобы изображение" Drop Files " отображалось там, а также используйте это:

<div id="dropzonePreview" class="dz-default dz-message">
  <span>Drop files here to upload</span>
</div>

Это позволяет использовать один Форма Dropzone (таким образом, все поля отправляются как одно), позволяя вам иметь меньшую область, предназначенную для удаления / щелчка.

одно примечание, хотя, не делайте его слишком маленьким, как если бы вы перетащить за пределы области он загружает изображение в браузере вместо страницы.


альтернативно вы можете создать dropzones programmaticaly (даже на non form elements) путем создания экземпляра класса Dropzone http://www.dropzonejs.com/#toc_4

вам нужно добавить ДЗ-кликабельно class к желаемому элементу.

HTML-код

<div class="dropzone dz-clickable" id="myDrop">
    <div class="dz-default dz-message" data-dz-message="">
        <span>Drop files here to upload</span>
    </div>
</div>

JavaScript

// Dropzone class:
var myDropzone = new Dropzone("div#myDrop", { url: "/file/post"});

// If you use jQuery, you can use the jQuery plugin Dropzone ships with:
$("div#myDrop").dropzone({ url: "/file/post" });

Примечание

если вы получаете ошибку консоли говорит:Dropzone already attached, обязательно добавьте эту строку перед началом нового объекта Dropzone.

Dropzone.autoDiscover = false;

в документации говорится, чтобы установить опцию: "clickable: true", но...

моя проблема заключалась в том, что я добавил видимую разметку в форме загрузки (поле). Если вы хотите, чтобы каждая точка в поле была кликабельной, вы не можете включить любую другую видимую разметку в своем представлении, вам нужно добавить ее в опцию "dictDefaultMessage."