web-dev-qa-db-ja.com

Dropzoneオプションをどのように有効にしますか？ autoDiscoverはDropzone機能を破壊します。

だから、私はここで解決策に従ってみました：

ドロップゾーン画像のアップロードオプションが機能しない：（

しかし、私がオプションを提供するときはいつでも：

        Dropzone.autoDiscover = false;

ドロップゾーンは、デフォルトのドラッグアンドドロップの外観の表示から、「参照」ボタンのあるテキストのみになります。

これが私のコードです（dropzoneはヘッダーに含まれています）：

<script type="text/javascript">
        $(document).ready(function () {

            Dropzone.autoDiscover = false;
            $("#uploadme").dropzone({
                maxFilesize: 5000,
                dictDefaultMessage: "Drop your file here to upload (multiple files require being zipped)",
                uploadMultiple: false,
                addRemoveLinks: true
            });

        });
    </script>

    <h5>Test space for FTP</h5>
    <asp:Label ID="lblError" runat="server"></asp:Label>

    <div class="mainContent">
        <form runat="server" method="post" enctype="multipart/form-data"
            class="dropzone"
            id="ftpUpload">
            <div class="fallback" id="uploadme">
                <input type="file" name="file" multiple />
                <input type="submit" value="Upload" />
            </div>
        </form>
    </div>

したがって、問題は、デフォルトの外観を損なうことなく、ドロップゾーンのオプションを指定するにはどうすればよいですか？

javascripthtmldropzone.js
8
Joshua Kemmerer

私はそれを自分で理解しました。私はASP.NETWebフォームにかなり慣れていないので、Javascriptがクライアント側であるため、サーバー側とクライアント側で異なる要素IDを参照することを忘れました。ソースを表示したところ、フォームのIDが「aspnetForm」であることがわかったため、オプションコードを次のように変更しました。

Dropzone.options.aspnetForm = {
            uploadMultiple: false,
            maxFiles: 1,
            maxFilesize: 5000,

等.

今それは動作します！

2
Joshua Kemmerer

頑張って

@{
}

<div id="dropzone">
    <form action="/Photo/Upload" class="dropzone" id="uploader" enctype="multipart/form-data"></form>
</div>

@section Styles{
    <link rel="stylesheet" type="text/css" href="~/lib/dropzone/dist/basic.css" />
    <link rel="stylesheet" type="text/css" href="~/lib/dropzone/dist/dropzone.css" />

}
@section Scripts{
    <script src="~/lib/dropzone/dist/dropzone.js"></script>

    <script>
        Dropzone.autoDiscover = false;
        window.onload = function () {

            var dropzoneOptions = {
                dictDefaultMessage: 'Drop Here!',
                paramName: "file",
                maxFilesize: 2, // MB
                addRemoveLinks: true,
                init: function () {
                    this.on("success", function (file) {
                        console.log("success > " + file.name);
                    });
                }
            };
            var uploader = document.querySelector('#uploader');
            var newDropzone = new Dropzone(uploader, dropzoneOptions);

            console.log("Loaded");
        };
    </script>
}
7
Cemal Can AKGÜL

4つのオプション：

  1. フォームでクラス_.dropzone_を使用しないでください。これにより、自動検出でクラスが取得されなくなります。デフォルトのCSSを使用したい場合、それはあなたを混乱させるでしょう
  2. _Dropzone.autoDiscover = false;_を使用する
  3. Dropzone.options。$ {formname}を設定して、ロード後にオプションにアクセスします。ここで、formnameはフォームのキャメルケースIDです。
  4. 要素にアタッチされたdropzoneプロパティを介して、ロード後にオプションにアクセスします。
    document.querySelector(formname).dropzone.options
  5. _Dropzone.instances[0].options_のインデックスからアクセスできます。

後者の手順を使用する場合（サイトで推奨されているように）、要素のURLなどのオプションを設定し、次の方法でオプションをマージすることもできます。

_let dz = document.querySelector(formname).dropzone
dz.options = { ...dz.options, ...{ myopts } }
_
2
SamGoody