2016-08-24 21 views
0

私はファイルをアップロードするための簡単なフォームを作成します。フォームを使用すると、複数のファイルをキューに追加できます。特別なボタンを使用すると、ファイルをキューから削除できます。しかし何らかの理由で、私が望むやり方ではうまくいかない。 [ファイルをアンロード]をクリックすると、サーバーにアップロードされているファイルが2つだけになります。 2回目以降をクリックすると2つのファイルがアップロードされます。すべてのコードは以下のとおりです。ボタンをクリックするだけですべてのファイルをアップロードするには?前もって感謝します。ボタンでDropzone.jsで2つ以上のファイルをアップロードするには

HTML:

<div class="panel panel-default"> 
    <div class="panel-heading"> 
     <strong>Прикрепить файлы</strong> 
    </div> 
    <div class="panel-body"> 
     <button type="button" class="btn btn-primary" id="add-file"> 
     <span class="glyphicon glyphicon-folder-close" aria-hidden="true"></span> Обзор... 
     </button> 
     <button type="button" class="btn btn-primary" id="upload-file"> 
     <span class="glyphicon glyphicon-folder-close" aria-hidden="true"></span> Загрузить 
     </button> 
     <ul class="list-group dropzone-previews" style="margin-top: 10px; margin-bottom: 0;"></ul> 
    </div> 
</div> 

JS:PHPの

$(".panel").dropzone({ 
     url: "upload.php", 
     autoProcessQueue: false, 
     init: function() { 
     var myDropzone = this; 
      $('#upload-file').click(function() { 
       myDropzone.processQueue(); 
      }); 
     }, 
     clickable: '#add-file', 
     acceptedFiles: 'image/*,application/pdf,application/msword', 
     previewsContainer: '.dropzone-previews', 
     previewTemplate: '<li class="working list-group-item">' + 
      '<span data-dz-name></span> <span data-dz-size></span> (<u data-dz-remove>Удалить</u>)' + 
      '<div class="progress" style="margin-top: 10px; margin-bottom: 0;">' + 
      '<div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" data-dz-uploadprogress></div>' + 
      '</div></li>' 
    }); 

そして、私のサーバースクリプト:

<?php 
$ds = DIRECTORY_SEPARATOR; 
$storeFolder = '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); 
} 
?> 

答えて

1

ただ、デフォルトのそれでは10または20にparallelUploadsの価値を高めます一度に2つのファイルをサーバーに送信しますので、parallelUploadsの価値を高める必要があります。

$(".panel").dropzone({ 
      url: "upload.php", 
      autoProcessQueue: false, 
      init: function() { 
       var myDropzone = this; 

      }, 
      parallelUploads: 20, 
      clickable: '#add-file', 
      acceptedFiles: 'image/*,application/pdf,application/msword', 
      previewsContainer: '.dropzone-previews', 
      previewTemplate: '<li class="working list-group-item">' + 
        '<span data-dz-name></span> <span data-dz-size></span> (<u data-dz-remove>Удалить</u>)' + 
        '<div class="progress" style="margin-top: 10px; margin-bottom: 0;">' + 
        '<div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" data-dz-uploadprogress></div>' + 
        '</div></li>' 
     }); 
     $('#upload-file').click(function() { 
      myDropzone.processQueue(); 
     }); 
+1

ありがとうございました!しかし、私はよりエレガントな方法を見つけました。これを追加するだけです。 this.on( "success"、function(){ myDropzone.options.autoProcessQueue = true; }); を初期化します。 ここでは完全な答えです:https://github.com/enyo/dropzone/issues/253 –

+0

あなたは歓迎です:) –

関連する問題