7

ドラッグ アンド ドロップの画像アップロードを構築しようとしていますが、ドロップゾーン オプションが機能せず、正しい方法で行っているかどうかもわかりません。

次のオプションを設定したいと思います。

  • 1 つのファイルのみをアップロードする (multiupload パラメーター)

  • そのファイルを削除する可能性 (addremovelink?)

  • 最大ファイル サイズ 2 MB (maxfilesize)

助けてください。

コードは次のとおりです。 

    <html>
<head>
    <title></title>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script src="dropzone.js" type="text/javascript"></script>
    <link href="css/basic.css" rel="stylesheet" type="text/css" />
    <link href="css/dropzone.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <script type="text/javascript">
        $(document).ready(function(){
            $("#uploadme").dropzone({
                paramName: 'photos',
                url: 'upload.php',
                dictDefaultMessage: "Drag your images",
                clickable: true,
                enqueueForUpload: true,
                maxFilesize: 1,
                uploadMultiple: false,
                addRemoveLinks: true
            });

        });
    </script>
    <form action="upload.php" class="dropzone">
        <div id="uploadme" class="fallback">
            <input name="file" type="file" multiple />
        </div>
    </form>
</body>
</html>

みんなありがとう、あなたはロックです！:)

4

3 に答える 3

14

Jquery 呼び出しの前に追加するだけ

Dropzone.autoDiscover = false;

からアクションを削除し<form>ます。これにより、自動検出機能が無効になり、フォームのすべてのオプションを指定できるようになります。

コードは次のようになります。

<html>
<head>
    <title></title>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script src="dropzone.js" type="text/javascript"></script>
    <link href="css/basic.css" rel="stylesheet" type="text/css" />
    <link href="css/dropzone.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <script type="text/javascript">
        $(document).ready(function(){
            Dropzone.autoDiscover = false;
            $("#uploadme").dropzone({
                paramName: 'photos',
                url: 'upload.php',
                dictDefaultMessage: "Drag your images",
                clickable: true,
                enqueueForUpload: true,
                maxFilesize: 1,
                uploadMultiple: false,
                addRemoveLinks: true
            });

        });
    </script>
    <form action="" class="dropzone">
        <div id="uploadme" class="fallback">
            <input name="file" type="file" multiple />
        </div>
    </form>
</body>
</html>
于 2013-09-14T07:38:57.867 に答える
6

私の状況では、バニラ JS Dropzone クラスのインスタンス化を使用して、関数のDropzone.autoDiscover = false;外側に配置する必要がありました。$(document).ready

html:

<form id="image-upload" action="/upload" class="dropzone" method="post" name="file"></form>

JavaScript:

<script>
Dropzone.autoDiscover = false;
$(document).ready(function() {
    var myDropzone = new Dropzone('form#image-upload',{
        maxFiles:12,
        acceptedFiles: 'image/*',
        dictInvalidFileType: 'This form only accepts images.'
    });
});

于 2016-12-11T04:52:48.980 に答える