Dropzone文件未处理答案

【问题标题】：Dropzone files not processingDropzone文件未处理
【发布时间】：2017-07-17 20:49:14
【问题描述】：

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

制作 Dropzone 表单的 HTML

<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 文件，但我无法在这篇文章中附加它，所以我认为 .png 就足够了。它们看起来相同。）

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

【问题讨论】：

标签： javascript html dropzone.js

【解决方案1】：

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>IndexStackOverflow101</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>

【讨论】：

我们之间唯一的主要区别是我没有表单元素的enctype="multipart/form-data" 部分，所以我添加了它，但相同的结果仍然存在。不过，我非常感谢您的帮助，并且我非常愿意接受您可能提出的其他想法。
@Alerra 我转发了。您能告诉我是否可以将我的调试与您的进行比较吗？
是的，我应该怎么给你我的代码？（我是这个网站的新手）
您应该继续编辑您的问题。您可以首先编辑
行的问题，然后取出 id 中的破折号。
知道了，马上就搞定。此外，您的测试代码作为 javascript 都包含在 html 的头部。我的 JS 在正文中被引用到另一个 JS。这会有所作为吗？