Použitie dropzone.js na odovzdávanie súborov OnClick pomocou služby ASP.NET - javascript, html, asp.net, upload-súbor, dropzone.js

Ahoj všetci a ďakujem vám v pokročilom.

V podstate chcem pridať Dropzone.js Upload na mojej stránke, ktorá mi umožňuje presúvať n "drop files do dropzone a potom kliknúť na tlačidlo, aby ste ju odovzdali do priečinka pomocou backendového rozhrania API. Chyba je na strane klienta s JS a ja len hľadám pomoc ako môžem pristupovať k tomu lepšie / pracovnejším spôsobom.

Môj html:

<form action="#" class="dropzone">
<div class="fallback">
<input id="fileUpload" type="file" name="file" multiple onchange="setFileInfo(this.files)" />
</div>
</form>
<button id="btnUploadFile" type="button"></button>

Môj JS:

$("#btnUploadFile").on("click", function () {

var data = new FormData($("form")[0]);
var files = $("#fileUpload").get(0).files;

// Add the uploaded image content to the form data collection
if (files.length > 0) {
for (i = 0; i < files.length; i++) {
data.append("UploadedImage" + i, files[i]);
}
}

console.log(data)

// Make Ajax request with the contentType = false, and procesDate = false
var ajaxRequest = $.ajax({
type: "POST",
url: "api/fileupload/uploadfile",
enctype: "multipart/form-data",
contentType: false,
processData: false,
data: data
});

ajaxRequest.done(function (xhr, textStatus) {
// Do other operation
console.log(textStatus)
console.log(xhr)
});

Dropzone.autoDiscover = false;

var myDropzone = new Dropzone(element, {
url: "#",
autoProcessQueue: false
});

Moja chyba:

Uncaught TypeError: Cannot read property "files" of undefined
at HTMLButtonElement.<anonymous> (core.js:1064)
at HTMLButtonElement.dispatch (jquery.js:5206)
at HTMLButtonElement.elemData.handle (jquery.js:5014)

Dúfam, že to stačí podrobne. Ďakujem mnohokrát.

odpovede:

Pozrite sa tu DropZone Doc, použitie bez JS, Obsah v záložke div bude odstránenýpodľa dropzone.js, keď je k dispozícii JS. To znamená, že nie je k dispozícii súborUpload-Input, po spustení JS z dropzone.js na pageload. Miesto dropzone vytvorí vlastné. Môžete to vidieť, keď sa pozriete na HTML vo svojom prehliadači.

Keďže záložné zariadenie je k dispozícii iba vtedy, keď je tamnie je žiadny javascript, neexistuje žiadny spôsob, ako poslať obsah formulára do JS. Môžete vysvetliť, prečo neposielate údaje do formulára? Možno vám môžem pomôcť trochu viac ako to napraviť.