204

現在、ユーザーが投稿したい広告の詳細を入力する HTML フォームがあります。販売中の商品の画像をアップロードするためのドロップゾーンを追加できるようにしたいと考えています。

必要なことのほとんどを行うと思われるDropzone.jsを見つけました。ただし、ドキュメントを調べると、(入力要素dropzoneだけではなく)フォーム全体のクラスを指定する必要があるようです。これは、フォーム全体がdropzoneになることを意味します。

フォーム全体ではなく、要素をクラス"dropzone"として指定するだけで、フォームの一部だけで dropzone を使用することは可能ですか?

別のフォームを使用することもできますが、ユーザーが 1 つのボタンですべてを送信できるようにしたいと考えています。

あるいは、これを行うことができる別のライブラリはありますか?

どうもありがとう

4

13 に答える 13

67

これを行う別の方法を次に示しdivます。クラス名 dropzone を使用してフォームに a を追加し、dropzone をプログラムで実装します。

HTML :

<div id="dZUpload" class="dropzone">
      <div class="dz-default dz-message"></div>
</div>

JQuery:

$(document).ready(function () {
    Dropzone.autoDiscover = false;
    $("#dZUpload").dropzone({
        url: "hn_SimpeFileUploader.ashx",
        addRemoveLinks: true,
        success: function (file, response) {
            var imgName = response;
            file.previewElement.classList.add("dz-success");
            console.log("Successfully uploaded :" + imgName);
        },
        error: function (file, response) {
            file.previewElement.classList.add("dz-error");
        }
    });
});

注 : autoDiscover を無効にします。そうしないと、Dropzone は 2 回接続を試みます

于 2015-03-20T12:44:15.393 に答える
52

私はまったく同じ問題を抱えていましたが、元の質問を実際に解決したのは Varan Sinayee の回答だけであることがわかりました。ただし、その答えは単純化できるため、より単純なバージョンを次に示します。

手順は次のとおりです。

  1. 通常のフォームを作成します (これは dropzone によって処理されなくなったため、メソッドと enctype 引数を忘れないでください)。

  2. class="dropzone"（Dropzoneがそれに接続する方法です）とid="yourDropzoneName"（オプションを変更するために使用されます）で内部にdivを配置します。

  3. Dropzone のオプションを設定し、フォームとファイルが投稿される URL を設定し、autoProcessQueue を無効にし (ユーザーが「送信」を押したときにのみ発生するように)、複数のアップロードを許可します (必要な場合)。

  4. 送信ボタンがクリックされたときのデフォルトの動作の代わりに Dropzone を使用するように init 関数を設定します。

  5. 引き続き init 関数で、"sendingmultiple" イベント ハンドラーを使用して、ファイルと共にフォーム データを送信します。

ほら！$_POST と $_FILES で、通常のフォームと同じようにデータを取得できるようになりました (この例では、これは upload.php で行われます)。

HTML

<form action="upload.php" enctype="multipart/form-data" method="POST">
    <input type="text" id ="firstname" name ="firstname" />
    <input type="text" id ="lastname" name ="lastname" />
    <div class="dropzone" id="myDropzone"></div>
    <button type="submit" id="submit-all"> upload </button>
</form>

JS

Dropzone.options.myDropzone= {
    url: 'upload.php',
    autoProcessQueue: false,
    uploadMultiple: true,
    parallelUploads: 5,
    maxFiles: 5,
    maxFilesize: 1,
    acceptedFiles: 'image/*',
    addRemoveLinks: true,
    init: function() {
        dzClosure = this; // Makes sure that 'this' is understood inside the functions below.

        // for Dropzone to process the queue (instead of default form behavior):
        document.getElementById("submit-all").addEventListener("click", function(e) {
            // Make sure that the form isn't actually being sent.
            e.preventDefault();
            e.stopPropagation();
            dzClosure.processQueue();
        });

        //send all the form data along with the files:
        this.on("sendingmultiple", function(data, xhr, formData) {
            formData.append("firstname", jQuery("#firstname").val());
            formData.append("lastname", jQuery("#lastname").val());
        });
    }
}
于 2016-02-08T17:07:31.370 に答える
8

Enyo のチュートリアルは優れています。

チュートリアルのサンプル スクリプトは、ドロップゾーン (つまり、フォーム要素) に埋め込まれたボタンでうまく機能することがわかりました。フォーム要素の外にボタンを配置したい場合は、クリック イベントを使用して実現できました。

まず、HTML:

<form id="my-awesome-dropzone" action="/upload" class="dropzone">  
    <div class="dropzone-previews"></div>
    <div class="fallback"> <!-- this is the fallback if JS isn't working -->
        <input name="file" type="file" multiple />
    </div>

</form>
<button type="submit" id="submit-all" class="btn btn-primary btn-xs">Upload the file</button>

では、スクリプトタグを……。

Dropzone.options.myAwesomeDropzone = { // The camelized version of the ID of the form element

    // The configuration we've talked about above
    autoProcessQueue: false,
    uploadMultiple: true,
    parallelUploads: 25,
    maxFiles: 25,

    // The setting up of the dropzone
    init: function() {
        var myDropzone = this;

        // Here's the change from enyo's tutorial...

        $("#submit-all").click(function (e) {
            e.preventDefault();
            e.stopPropagation();
            myDropzone.processQueue();
        }); 
    }
}
于 2013-12-01T05:59:58.357 に答える
8

sqramが言ったことに加えて、Dropzoneには追加の文書化されていないオプション「hiddenInputContainer」があります。隠しファイル フィールドを追加するフォームのセレクターにこのオプションを設定するだけです。そして出来上がり！Dropzone が通常本文に追加する「.dz-hidden-input」ファイル フィールドは、魔法のようにフォームに移動します。Dropzone のソース コードを変更する必要はありません。

これで Dropzone ファイル フィールドがフォームに移動されますが、フィールドには名前がありません。したがって、次を追加する必要があります。

_this.hiddenFileInput.setAttribute("name", "field_name[]");

この行の後に dropzone.js に:

_this.hiddenFileInput = document.createElement("input");

547行目あたり。

于 2015-12-17T09:48:53.830 に答える
5

1 回のリクエストで他のフォーム データと一緒にすべてのファイルを送信するには、Dropzone.js の一時的な非表示inputノードをフォームにコピーします。addedfilesこれは、イベント ハンドラー内で行うことができます。

var myDropzone = new Dropzone("myDivSelector", { url: "#", autoProcessQueue: false });
myDropzone.on("addedfiles", () => {
  // Input node with selected files. It will be removed from document shortly in order to
  // give user ability to choose another set of files.
  var usedInput = myDropzone.hiddenFileInput;
  // Append it to form after stack become empty, because if you append it earlier
  // it will be removed from its parent node by Dropzone.js.
  setTimeout(() => {
    // myForm - is form node that you want to submit.
    myForm.appendChild(usedInput);
    // Set some unique name in order to submit data.
    usedInput.name = "foo";
  }, 0);
});

明らかに、これは実装の詳細に依存する回避策です。関連するソース コード。

于 2016-08-23T15:22:34.307 に答える
5

ドロップゾーンから「送信」イベントをキャッチすることで、formData を変更できます。

dropZone.on('sending', function(data, xhr, formData){
        formData.append('fieldname', 'value');
});
于 2015-05-22T16:55:16.377 に答える
1

これは、既存のフォームで Dropzone.js を使用する方法のもう 1 つの例です。

ドロップゾーン.js:

 init: function() {

   this.on("success", function(file, responseText) {
     //alert("HELLO ?" + responseText); 
     mylittlefix(responseText);
   });

   return noop;
 },

次に、後で私が入れたファイルに

function mylittlefix(responseText) {
  $('#botofform').append('<input type="hidden" name="files[]" value="'+ responseText +'">');
}

#botofformこれは、アップロード時にアップロードされたファイルの名前を使用できるように、id を持つ div があることを前提としています。

注: 私のアップロード スクリプトは、uploadedfilename.jpeg dubble を返しました。また、使用されていないファイルのアップロード ディレクトリをチェックし、それらを削除するクリーンアップ スクリプトを作成する必要があることに注意してください..フロント エンドの認証されていない形式の場合:)

于 2014-12-03T02:12:53.030 に答える