Dropzone 文件未处理

Question

我正在尝试让一个简单的 Dropzone 框正常工作，而且我似乎已设置好所有内容，尽管我尝试上传的文件从未上传过。但是，我没有收到任何错误，所以我真的不知道去哪里找。这是我的代码的相关部分：

HTML 制作 Dropzone 表格

<div class="col-lg-6">
<form action="/" method="post" class="dropzone needsclick dz-clickable" 
    id="demoUpload">
  <div class="dz-message needsclick">
    "Drop SVG Files Here or Click to Upload"
    <br>
    <span class="note needsclick">
      "Only SVG filetypes are accepted. Rasterized img filetypes coming soon."
    </span>
  </div>
</form>
</div>

Dropzone 元素的 JS

    Dropzone.options.demoUpload = {
    paramName: "file", // The name that will be used to transfer the file
    maxFilesize: 1000, // MB'
    maxFiles: 1,

    init: function() {
      this.on("addedfile", function(file) { alert("File added.");});
    }
  };

dropzone 在浏览器中显示正常，但是当我将文件拖到它上面时，它看起来好像文件在 dropzone 中，但缩略图只显示图像的一半，进度条保持为零。这是它的样子。

Screenshot of what the Dropzone looks like after I drag in a file

File I am trying to upload

（我尝试上传的文件实际上是一个 .svg 文件，但我无法在此 post 中附加它，所以我认为 .png 就足够了。它们看起来完全相同。）

如果有人能帮我弄清楚我需要更改什么才能正确上传文件，我将不胜感激。谢谢！

Answer 1

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>IndexWhosebug101</title>
    <link href="~/Content/dropzone.css" rel="stylesheet" />
    <style type="text/css">
        .dropzone {
            border: 2px dashed #0087F7;
            border-radius: 5px;
            background: white;
        }
    </style>
    <script src="~/Scripts/dropzone.js"></script>
</head>
<body>
    @*changed the id*@
    <form action="/" class="dropzone" enctype="multipart/form-data" id="demoUpload" method="post">
        <div class="dz-message needsclick">
            "Drop SVG Files Here or Click to Upload"
            <br>
            <span class="note needsclick">
                "Only SVG filetypes are accepted. Rasterized img filetypes coming soon."
            </span>
        </div>
    </form>
    <script type="text/javascript">
        //YOU have a dash in the form id, please change it
        Dropzone.options.demoUpload = {
            paramName: "file", // The name that will be used to transfer the file
            maxFilesize: 1000, // MB'
            maxFiles: 1,

            init: function () {
                this.on("addedfile", function (file) { alert("File added."); });
            }
        };
    </script>
</body>
</html>

Dropzone 文件未处理

Dropzone files not processing

html

javascript

dropzone.js