web-dev-qa-db-ja.com

dropzone.js画像のアップロードが受け入れられました

Dropzone.jsプラグインを使用して、画像アップローダーをアプリケーションに追加しています。これはおそらく本当に基本的な質問なので、謝罪しますが、ファイル拡張子を制限することを望みます。これは、単一のファイル拡張子に対して機能します。

<script type="text/javascript">
   Dropzone.options.dropzone = {
        accept: function(file, done) {
            console.log(file);
            if (file.type != "image/jpeg") {
                done("Error! Files of this type are not accepted");
            }
            else { done(); }
        }
    }
 </script>

したがって、私の質問は、複数のファイル拡張子を追加する方法、つまりimage/jpegimage/png

ありがとう

26
user1098178

次のように、ifにさらに拡張機能を追加できます。

if (file.type != "image/jpeg" && file.type != "image/png") {

これにより、ファイルタイプが指定したすべてのタイプと異なるかどうかが確認されます。ファイルがチェックに合格するには、image/jpegおよびimage/pngとは異なる必要があります

更新

enyo's answer をご覧になることをお勧めします。彼はDropzoneの著者であるためです。

14
jdepypere

私はDropzoneの著者です。

を使用する必要があります acceptedMimeTypes acceptedFiles。これは、input要素のacceptプロパティとまったく同じように動作します。これにより、フォールバックも適切に機能します。

有効なacceptedFilesプロパティは次のようになります。

  • audio/*
  • image/*
  • image/jpeg,image/png
  • 等...

[〜#〜] edit [〜#〜]:Dropzoneの最新バージョンでは、このプロパティはacceptedFilesと呼ばれ、拡張機能も定義できます。したがって、これは動作します:

"audio/*,image/*,.psd,.pdf"

(後方互換性のため、acceptedMimeTypesは次のメジャーリリースまで引き続き機能します)

110
enyo

enyoそれは働いた....素晴らしい... dropjone.jsにその行を貼り付けてください->

uploadMultiple: true,  //upload multiple files
maxFilesize: 1,  //1 mb is here the max file upload size constraint
acceptedFiles: ".jpeg,.jpg,.png,.gif",

http://www.dropzonejs.com/#config-acceptedFiles

Acceptのデフォルト実装は、このリストに対してファイルのMIMEタイプまたは拡張子をチェックします。これは、MIMEタイプまたはファイル拡張子のコンマ区切りリストです。例:'image/*,application/pdf,.psd' Dropzoneがクリック可能な場合、このオプションは隠しファイル入力の受け入れパラメーターとしても使用されます。

26
Sachin
var myDropzone = new Dropzone('div#profile_pictures',{
    acceptedFiles: "image/*", /*is this correct?*/
    init: function(){
        this.on("success", function(file, data) {
            /*..*/
            });
        } 
})
6
user2865151
var dz = $("#FileUpload").dropzone({acceptedFiles: ".jpeg"})[0];
0
Hafsal Rh

誰かが興味がある場合(Enyoの投稿にコメントすることはできません):Dropzoneオプションの適用に問題があり、調査した後、jQueryのバージョンjquery-3.2.1.min.js私が使用していたことが、その誤動作の原因でした

0
rafa_pe