web-dev-qa-db-ja.com

フォーム全体ではなくDropzone.jsプレビューDivのみをクリック可能にする方法

Dropzone.jsフォームを使用する必要があります。このフォームは、いくつかの入力とファイルのアップロード情報を他のページに送信します。

私のドロップゾーンコードは次のようになります->

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とDrag and Dropの両方のPreviewsコンテナーのみを作成したいのですが、フォーム全体ではありません。

clickable:falseを使用する場合、プレビューdivをクリックしてファイルアップロードダイアログボックスを表示することはできません。また、フォーム上の任意の場所にファイルをドラッグアンドドロップすることもできません。私はそれを望んでいませんプレビューコンテナをドラッグアンドドロップするだけです[〜＃〜] and [〜＃〜]クリック可能ですが、同時にフォーム全体を送信する場合はクリックする必要がありますアップロードされます。

私はこのドロップゾーンのチュートリアルを読んだことがあります Dropzoneと通常のフォームを組み合わせる しかし、それは私が実際にやりたいことの半分に過ぎません。

Dropzoneを効率的に使用して、これらすべてを達成する方法はありますか？.

javascriptjqueryformsfile-uploaddropzone.js
13
Vishal Nair

私もこれに取り組んでおり、最終的に bootstrap ページで答えを見つけました。

キーはclickable:オプションを使用して、アクティブなドロップゾーン領域をどこにでも配置できます。サンプルを使用して、プレビュー領域をドロップ/クリック領域にもしたい場合は、clickable:'#dropzonePreview',そしてそれはそのエリアをアクティブにします。そこに「ドロップファイル」イメージを表示する場合は、これも使用します。

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

これにより、単一のDropzoneフォームを使用できるようになり（したがって、すべてのフィールドが1つとして送信されます）、ドロップ/クリック用に小さな領域を指定できます。

ただし、領域の外側にドラッグアンドドロップすると、ページの代わりにブラウザに画像が読み込まれるため、サイズを小さくしすぎないでください。

21
ChaosTheory

別の方法として、Dropzoneクラスをインスタンス化することにより、プログラムで（非フォーム要素でも）ドロップゾーンを作成できます http://www.dropzonejs.com/#toc_4

dz-clickableクラスを目的の要素に追加する必要があります。

[〜＃〜] 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;
11
Xhezairi

ドキュメントには、オプションを設定するように記述されています： "clickable：true"、しかし...

私の問題は、アップロードフォーム（ボックス）内に表示可能なマークアップを追加していたことです。ボックス内のすべてのポイントをクリックできるようにする場合、ビューに他の可視マークアップを含めることはできません。オプション「dictDefaultMessage」に追加する必要があります。

0
Art P Vandelay