dropzone.jsファイルのフィルタリングと追加リンクの削除

Question

私はdropzone.jsを使用してファイルをサーバーにアップロードしています。私は同様の質問と回答を探しましたが、解決策は見つかりませんでした。私はdropzone version 4.3を使用しています。アップロードする前に各ファイルにキャンセルリンクを追加して、選択したファイルを削除し、pdfファイルとdocファイルのファイルフィルタを削除します。ここで

は私のコード

<form action='control/upload.php' class = "dropzone" id = 'my-dropzone"></form> 
<button id ='file_sub'>upload</button> 

JSある -

Dropzone.autodiscover = false; 
Dropzone.options.my-dropzone = { 
    autoProcessQueue:false, 
    addRemoveLinks:true, 
    acceptedFiles:".png,.jpg,.jpeg,.gif,.bmp,.doc,.docx,.pdf", 
    init:function(){ 
     this.addRemoveLink=true; 
    } 
}; 

$ ('#file_sub').click (function(){my-dropzone.processQueue}); 

しかし、それのどれもが作業していない、ファイルが自動的に送信され、任意のファイルをアップロードすることが可能と削除リンクはしていません現れる。

Answer 1

が必要なものを介して動作するために良い参考になるだろう最初のDropzone.autodiscoverがDropzone.autoDiscoverであるようにコードにいくつかのスペルミスがあります。オプションを設定する場合は、autoDiscoverをfalseに設定する必要はありません。

そして、 `my-dropzone 'の代わりにmyDropzoneというhtml要素のcamelized idを呼び出さなければならないというオプションを設定するためには、これはあなたのスクリプトが機能していない主な理由です。オプション。また、init関数内でファイルをアップロードするためのイベントリスナーを設定する必要があります。ここでは、正しい構文で見ることができます：

HTML：

<form action="control/upload.php" class="dropzone" id="my-dropzone"></form> 
<button id="file_sub">upload</button> 

JS：それは完全に働いたが、私は今、それが唯一のクリックあたり2つのファイルを送る私はcheackedしていることに気づいた

Dropzone.options.myDropzone = { 
    autoProcessQueue:false, 
    addRemoveLinks:true, 
    acceptedFiles:".png,.jpg,.jpeg,.gif,.bmp,.doc,.docx,.pdf", 
    init: function() { 
     var myDropzone = this; 
     $('#file_sub').click(function(){ 
      myDropzone.processQueue(); 
     }); 
    } 
}; 

Answer 2

Dropzoneのドキュメントは、いくつかの面で少し欠けています。私はこれを1年以上前に練習しましたが、同様の問題があることを覚えています。ここでは、基本的にあなたがやろうとしていることを行うページ上にある初期設定を示します。

var previewNode = document.querySelector("#preview-template"); 
previewNode.id = ""; 
var previewTemplate = previewNode.parentNode.innerHTML; 
previewNode.parentNode.removeChild(previewNode); 
var acceptedFilesList = ".flv, .mp4, .jpg, .jpeg, .gif, .png, .doc, .docx, .pdf, .xls, .xlsx, .ppt, .pptx, .txt"; 

myDropzone = new Dropzone(document.body, { 
     url: "[url to post to]", 
     clickable: "[id$=dropzone-clickable]", // Make dropdown menu item clickable for uploads 
     previewTemplate: previewTemplate, // Use the previewTemplate div from markup to generate html in the modal for each file added 
     autoQueue: false, // Make sure the files aren't queued until manually added 
     previewsContainer: "#previews", // Define the container to display the previews 
     paramName: "UploadImage", // The variable name of the uploaded file on submit 
     acceptedFiles: acceptedFilesList 
     }); 

previewTemplateは、ユーザーがアップロードしようとしている各ファイルに関する情報を表示するために使用されるマークアップのセットです。 Dropzoneのドキュメントは、実際にはpreviewTemplateを説明するうえでとてもうまくやっていますし、カスタマイズする方法もあります。

私はその後、プレビュー列をカスタマイズするには、「addedfile」にイベントリスナーを使用します。

myDropzone.on("addedfile", function (file) { 
    /* added logic for setting up the preview row, 
    investigate the file object within this to see what you can do */ 
}); 

最後に、私は、ドロップゾーンの用語で（アップロードを開始]ボタンを持っていると、追加されたすべてのファイルをエンキュー）：

$(".btn-start-all").on("click", function() {    
    var addedFiles = myDropzone.getFilesWithStatus(Dropzone.ADDED); 
    addedFiles.forEach(function (upload) { 
     myDropzone.enqueueFile(upload); 
    }); 
}); 

これは私が持っているもののストリップダウン/裸の骨のバージョンのようなものですが、うまくいけば、あなたが