web-dev-qa-db-ja.com

dropzoneは1つのファイルのみをアップロードします

ドラッグアンドドロップファイルアップロードソリューションにdropzone.jsを使用しています。 1つのファイルのみをアップロードしたいのですが、2番目のファイルをアップロードする場合、最初のファイルを削除し、2番目のファイルをアップロードする必要があります。どのようにそれを行うかのアイデア。

ここに私のHTMLがあります

<form class="dropzone dz-clickable" action="upload.php" enctype='multipart/form-data'>
  <i class="fa fa-cloud-upload element"></i>
  <div style="color:gray;">Drag and drop or click to upload image</div>
  <input type="hidden" name="filenameEmail" class="filenameEmail" value="">
  <input type="hidden" name="side" value="front">
</form>

dropzone.jsを変更しました

maxFiles: 1

アップロードできるファイルは1つだけですが、以前にアップロードしたファイルを削除することはできません。

javascriptphpdropzone.js
27
user3064914

maxFiles：1は、dropzoneにファイルが1つしかないことを伝えるために使用されます。複数のファイルがある場合、関数maxfilesexceeded （が呼び出され、超過ファイルが最初のパラメーターとして使用されます。

これは、最初のファイルのプレビューを削除して新しいファイルを追加する簡単な関数です:)

maxFiles:1,
init: function() {
      this.on("maxfilesexceeded", function(file) {
            this.removeAllFiles();
            this.addFile(file);
      });
}
77
NeoNe

メソッドmaxfilesexceededでイベントaddFileを使用し、イベント呼び出しの無限ループに遭遇しました。公式サイトでもGitHub wikiでも言及されていなかったので、addFileを使用することの問題になるはずです。最後に、addedfileイベントで解決しました。 Dropzone.jsは、筆者が作成した最新バージョン（4.3.0）です。

init: function() {
  this.on('addedfile', function(file) {
    if (this.files.length > 1) {
      this.removeFile(this.files[0]);
    }
  });
}
16
darkbaby123

maxFilesを1に制限しても、アップロードダイアログで複数のファイルを選択できます。設定で複数の画像を選択できないようにするには、次の初期化関数を指定します。

maxFiles:1,
init: function() {
    this.hiddenFileInput.removeAttribute('multiple');
}
13
darklow
 Dropzone.prototype.defaultOptions.init = function () {

                 this.hiddenFileInput.removeAttribute('multiple');
                 this.on("maxfilesexceeded", function (file) {
                     this.removeAllFiles();
                     this.addFile(file);
                 });
             };

これは私にとって仕事です。

1
Luiz Fernando Corrêa Leite