Dropzone JS：プロセスをアップロードした後、各イメージのURLを別々のAJAXリクエストとして渡す方法は？

Question

私はによって提供さDropzone.js資源のオフつもり

：http://www.dropzonejs.com/私はをやろうとしている何

- イメージ（複数可）をアップロードし、すべての入力を記入した後、各画像のリンクを取得しますこのセッションでアップロードされたURLは、POSTタイプとしてAJAXリクエストURLに渡されます。

マイHTML：

<div id="myForm"> 
    <input type="text" id="form-name" placeholder="Name"> 
    <input type="text" id="form-email" placeholder="Email"> 

    <form action="/upload-target" class="dropzone" id="myDropZone"></form> 

    <button id="submit-info">submit</button> 
</div> 

マイJS：

<script> 
    $("div#myDropzone").dropzone({ url: "/upload.php" }, 
     function() { 
      console.log("Hello"); 
     }); 
</script> 

画像は以下のPHPコードで言及したディレクトリにアップロードされているが、私は上記のスクリプト、との問題を抱えていますコンソールの出力は印刷されません。何かがアップロードされたときにHelloがコンソールに表示されません。

マイupload.php：

<?php 
    $ds   = DIRECTORY_SEPARATOR; 

    $storeFolder = 'img/uploads'; 

    if (!empty($_FILES)) { 

     $tempFile = $_FILES['file']['tmp_name'];   

     $targetPath = dirname(__FILE__) . $ds. $storeFolder . $ds; 

     $targetFile = $targetPath. $_FILES['file']['name']; 

     move_uploaded_file($tempFile,$targetFile); 

    } 
?> 

画像（複数可） 選択/ドラッグアンドdorppedなるとすぐ、上記のコードを説明するために、upload.phpは http://example.com/img/uploads/フォルダに画像をアップロードします。

私は助けが必要なのはここです：

を私はちょうどAJAXリクエストに文字列としてアップロードした各画像を渡し、ID submit-infoでボタンをクリックしたときのためにしようとしています：

<script> 
    $('#submit-info').click(function() { 
     var str = "name=" + $('#form-name').val() 
       + "&email=" + $('#form-email').val() 
       + "&images=" + /* what to put here */; 

     console.log(str); 

     $.ajax({ 
      type: "post", 
      url: "sendEmail.php", 
      data: str, 
      dataType: "json", 
      success: function (confirmation) { 
       // some code here dealing with after the email is sent like hiding the form 
      } 
     }); 
    }); 
</script> 

Answer 1

ここでそれを行うための一つの方法です：

var files = ''; 

if (Dropzone.forElement("#my-dropzone").files.length > 0) { 
    for (var i = 0; i<Dropzone.forElement("#my-dropzone").files.length; i++) { 
     if (i === (Dropzone.forElement("#my-dropzone").files.length - 1)) { 
      files += Dropzone.forElement("#my-dropzone").files[i].name; 
     } 
     else { 
      files += Dropzone.forElement("#my-dropzone").files[i].name + '~'; 
     } 
    } 
} 

上記は、コードは$('#submit-info').click(function() { ...の中に置く必要があります。送信ボタンをクリックすると、空の文字列を設定し、アップロードされたファイルがあるかどうかを確認し、存在する場合は連結します。

この例では、ファイルは~文字で区切られています。文字列が渡されると、str変数を次のように宣言できます。

$('#submit-info').click(function() { 
    var str = "name=" + $('#form-name').val() 
      + "&email=" + $('#form-email').val() 
      + "&images=" + files;