単純なフォームでドロップゾーンを結合する

Question

DropzoneJSを含むファイルアップローダを自分のHTMLフォームに挿入したいと思います。私はtutorialに基づいて次のコードを書きました。見ての通り、私はJavaScriptを使用してドロップゾーンに作るいくつかの入力フィールドやボックスを持っている

<form id="createProject" class="dropzone" action="/new_project" method="post" enctype="multipart/form-data"> 
    <input type="hidden" name="new_project" value="1"> 
    <div class="panel-body"> 
     <div class="row egal"> 
      <div action="#" class="col-md-4 col-xs-12 picture dropzone-previews"> 
       <div class="egal-center"> 
        <h5> 
         Add Picture 
        </h5> 
        <div class="upload-box btn"> 
         <i class="glyphicon glyphicon-plus"></i> 
        </div> 
       </div> 
      </div> 
      <div class="col-md-8 col-xs-12"> 
       <input type="text" name="title" class="form-control" placeholder="Add a new title"/> 
       <input type="text" name="web_page" class="form-control" placeholder="Type in your project's website"/> 
       <textarea name="description" cols="40" rows="5" class="form-control" placeholder="Say something about your project "></textarea> 
      </div> 
     </div> 
     <div class="row"> 
      <div class="input-group"> 
       <input name="video[]" class="form-control" type="text" placeholder="Video"/> 
       <div class="input-group-btn"> 
        <button type="button" class="btn btn-login addNewField"> 
         <i class="fa fa-plus"></i> 
        </button> 
       </div> 
      </div> 
      <div class="input-group"> 
       <input name="prezi[]" class="form-control" type="text" placeholder="Prezi"/> 
       <div class="input-group-btn"> 
        <button type="button" class="btn btn-login addNewField"> 
         <i class="fa fa-plus"></i> 
        </button> 
       </div> 
      </div> 
     </div> 
     <button type="submit" class="btn btn-login btn-block"> 
      Create project 
     </button> 
    </div> 
</form> 

：

は、ここに私のフォームです。私はチュートリアルのようなものを設定しましたが、以下のJavaScriptは動作しません。正常にイベントリスナーを追加するだけで、processQueue()メソッドが機能しません。 1つの画像だけが許可されているので、最大ファイルアップロードを1に設定しました。

Dropzone.options.createProject={ 
    autoProcessQueue: false, 
    uploadMultiple: true, 
    parallelUploads: 1, 
    maxFiles: 1, 
    clickable: ".dropzone-previews", 
    previewsContainer: ".dropzone-previews", 
    paramName:"picture", 
    init: function() { 
     var myDropzone=this; 
     this.element.querySelector("button[type=submit]").addEventListener("click", function(e){ 
      e.preventDefault(); 
      e.stopPropagation(); 
      myDropzone.processQueue(); 
      $(this).closest('form').ajaxFormSend(function(data){ 
       $('.projects-panel').prepend(Mustache.to_html(window.templates.panelProjects, data.data)); 
      }); 
     }); 
     this.on("sendingmultiple", function(){ 
     }); 
     this.on("successmultiple", function(files, response){ 
     }); 
     this.on("errormultiple", function(files, response){ 
     }); 
     this.on("maxfilesexceeded", function(file){ 
      myDropzone.removeFile(file); 
      noty({ 
       type:'error', 
       text:'No more files plesase!' 
      }); 
     }); 
    } 
} 

ドロップゾーンのみの形式で特定の名前の隠しファイル入力の値を設定すると、フォームが送信されているときに、他のデータと正常にファイルを送信する場合、最善の解決策は次のようになります。

注：ajaxFormSendは、ファイルとその他のデータを1つの接続で送信すると言ったjQueryメソッドです。私はこのメソッドでAJAXでフォーム全体を送信したいので、コードに残しました。隠れた入力フィールドを追加するだけで、Dropzoneはこの1つの入力フィールドの値を設定する必要があります。

Answer 1

dropzoneで問題なくフォームを送信できるはずですが、私はdropzoneから通常の入力フィールドにファイルを渡すことはできないと私は考えています。あなたが唯一の画像がuploadMultipleオプションを必要としない、とアップロードが完了したら、あなたが置くことができるようにしたい場合は

Dropzone.options.createProject = { 
    autoProcessQueue: false, 
    parallelUploads: 1, 
    maxFiles: 1, 
    previewsContainer: ".dropzone-previews", 
    dictDefaultMessage: '', 
    clickable: '.upload-box', 
    paramName:"picture", 
    init: function() { 
     var myDropzone=this; 
     this.element.querySelector("button[type=submit]").addEventListener("click", function(e){ 
      e.preventDefault(); 
      e.stopPropagation(); 
      myDropzone.processQueue(); 

     }); 
     this.on('addedfile', function(file){ 
      $('.upload-box').hide(); 
     }); 
     this.on('success', function(file){ 
      console.log(file.xhr.response); 
     }); 
    } 
} 

：このような構成を使用するドロップゾーンを使用してフォームを送信するには

コードをsuccessイベントで実行します。この例では、サーバーからの応答をコンソールに表示します。

dropzoneからデフォルトメッセージを削除するオプションはdictDefaultMessageで、dropzoneコンテナとは異なる要素を使用するにはclickableオプションがあります。