![](/img/trans.png)
[英]Unable to make the drop-zone clickable with jQuery in my asp.net application
[英]How to make drop-zone clickable in jQuery?
在我的Web表單應用程序中,我使用了放置區,用戶可以在其中放置文件以上傳文件。 在移動時,當我將文件拖放到拖放區時,它可以正常工作,並且我可以通過單擊位於拖放區下方的按鈕輕松上傳該文件。
但是,當有人單擊放置區域時,我想打開上載文件對話框。 如何使拖放區可單擊,以便顯示上傳文件對話框,從中可以選擇要上傳的文件。 我搜索了不同的技術,但沒有任何效果。 有什么方法可以幫助我輕松實現目標?
我的拖放區HTML在這里。
<div id="dZUpload" class="dropzone">
<div class="dz-default dz-message"></div>
</div>
我希望通過document.ready中的以下jQuery代碼實現此目標。
var userEmail = $("#hdnFolderPath").val();
var uploadButton = document.querySelector("#upload");
Dropzone.autoDiscover = false;
$("#dZUpload").dropzone({
url: "/ReceiptStorage/Handlers/FileHandler.ashx",
params: {
DestinationPath: userEmail
},
autoProcessQueue: false,
addRemoveLinks: true,
init: function () {
var uploadButton = document.querySelector("#upload");
var dZUpload = this; //closure
dZUpload.on("complete", function (file, response) {
if (file.status === 'success') {
dZUpload.removeFile(file);
LoadFiles($("#hdnFolderPath").val());
}
});
dZUpload.on('error', function (file, response) {
});
uploadButton.addEventListener("click", function () {
if (dZUpload.files.length > 0)
dZUpload.processQueue();
});
}
});
這是用作每個刪除文件模板的JQuery :
var previewNode = document.querySelector("#template");
previewNode.id = "";
var previewTemplate = previewNode.parentNode.innerHTML;
previewNode.parentNode.removeChild(previewNode);
var myDropzone = new Dropzone(document.body, { // Make the whole body a dropzone
url: "/target-url", // Set the url
thumbnailWidth: 80,
thumbnailHeight: 80,
parallelUploads: 20,
previewTemplate: previewTemplate,
autoQueue: false, // Make sure the files aren't queued until manually added
previewsContainer: "#previews", // Define the container to display the previews
clickable: ".fileinput-button" // Define the element that should be used as click trigger to select files.
});
myDropzone.on("addedfile", function(file) {
// Hookup the start button
file.previewElement.querySelector(".start").onclick = function() { myDropzone.enqueueFile(file); };
});
// Update the total progress bar
myDropzone.on("totaluploadprogress", function(progress) {
document.querySelector("#total-progress .progress-bar").style.width = progress + "%";
});
myDropzone.on("sending", function(file) {
// Show the total progress bar when upload starts
document.querySelector("#total-progress").style.opacity = "1";
// And disable the start button
file.previewElement.querySelector(".start").setAttribute("disabled", "disabled");
});
// Hide the total progress bar when nothing's uploading anymore
myDropzone.on("queuecomplete", function(progress) {
document.querySelector("#total-progress").style.opacity = "0";
});
// Setup the buttons for all transfers
// The "add files" button doesn't need to be setup because the config
// `clickable` has already been specified.
document.querySelector("#actions .start").onclick = function() {
myDropzone.enqueueFiles(myDropzone.getFilesWithStatus(Dropzone.ADDED));
};
document.querySelector("#actions .cancel").onclick = function() {
myDropzone.removeAllFiles(true);
};
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.