使用 dropzone.js 通过 ASP.NET 服务上传文件 OnClick

Question

大家好，先谢谢大家。

基本上，我想在我的页面上添加一个 Dropzone.js 上传框，允许我将文件拖放到拖放区，然后单击一个按钮使用后端将其上传到文件夹 API。错误是 JS 的客户端，我只是在寻求有关如何以 better/working 方式处理此问题的帮助。

我的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>

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

我的错误：

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)

我希望这足够详细。非常感谢。

Answer 1

看这里DropZone Doc, Usage without JS。当 JS 可用时，div 中的内容将被 dropzone.js 删除。这意味着，在 dropzone.js 中的 JS 在页面加载时执行后，没有 fileUpload-Input 可用。相反，dropzone 将创建自己的 .当您在浏览器中查看 HTML 时，您可以看到它。

因为回退只有在没有javascript的情况下才可用，所以也没有办法用JS发送你的表单内容。您能解释一下为什么不使用表单操作上传数据吗？也许我可以帮助您解决这个问题。

使用 dropzone.js 通过 ASP.NET 服务上传文件 OnClick

Using dropzone.js to upload files OnClick with ASP.NET Service

html

javascript

asp.net

file-upload

dropzone.js