dropzone.js文件過濾和添加刪除鏈接

我使用dropzone.js上傳文件到服務器，並且對此很新穎;我尋找類似的問題和答案，但我找不到任何解決方案。我正在使用dropzone 4.3版本，並且我想在上傳之前爲每個文件添加取消鏈接，以刪除選定的文件以及圖像pdf和doc文件的文件過濾器。dropzone.js文件過濾和添加刪除鏈接

這裏是我的代碼

<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});

但它都沒有工作，文件將被自動發送和任何文件都可以上傳和刪除鏈接不出現。

來源

2016-08-24 Natnael Getachew

什麼工作代碼中有一些拼寫錯誤，如第一個Dropzone.autodiscover爲Dropzone.autoDiscover請注意'D'，除此之外，如果您正在設置選項，則不需要將autoDiscover設置爲false。

爲了設置你必須調用html元素的camelized id的選項，在這種情況下，請使用myDropzone而不是`my-dropzone'，這是你的腳本無法工作的主要原因，因爲dropzone會使用默認選項。你還需要設置事件監聽器來上傳init函數中的文件。在這裏，您可以用正確的語法一看：

HTML：

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

JS：

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(); 
     }); 
    } 
};

來源

2016-08-24 16:15:48 wallek876

感謝它的工作完美，但我注意到，現在只發兩個文件每次點擊我已經cheacked文件大小並不大，我還沒有設置任何限制文件數量或size.is有辦法解決它？ –

@NatnaelGetachew，是的，這是dropzone的默認行爲。要允許上傳超過2個文件，您需要添加pareallel上傳限制的選項，默認情況下爲2，可以說'parallelUploads：10'。 – wallek876

是的，我很好，並行上傳的限制，但它不會繼續下一個文件，當兩個完成uploding，直到我再次點擊上傳 –

Dropzone的文檔在某些方面有點欠缺。我在一年多前完成了這個工作，但我記得有類似的問題。這是我在頁面上進行的初始化，基本上可以實現您希望執行的操作。

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); 
    }); 
});

這是怎麼樣的一個精簡/光禿禿的骨頭版本的我有什麼，但希望這將是一個很好的參考，爲您通過您需要

來源

2016-08-24 15:49:33 Adam

回答

相關問題