Javascript Dropzone文件未处理_Javascript_Html_Dropzone.js

Javascript Dropzone文件未处理

javascript html

Javascript Dropzone文件未处理,javascript,html,dropzone.js,Javascript,Html,Dropzone.js,我正在尝试让一个简单的Dropzone框工作，我似乎已经设置好了一切，尽管我试图上传的文件从未被上传。我没有得到任何错误，但是，所以我真的不知道在哪里寻找。以下是我的代码的相关部分： HTML制作Dropzone表单 <div class="col-lg-6"> <form action="/" method="post" class="dropzone needsclick dz-clickable" id="demoUpload"> <div cl

我正在尝试让一个简单的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在浏览器中显示良好，但当我将文件拖到它上时，它看起来好像文件在dropzone中，但缩略图仅显示我图像的一半，进度条保持为零。这是它的样子

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

如果有人能帮我弄清楚我需要做什么修改才能正确上传文件，我将非常感激。谢谢大家!


<!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>

IndexStackOverflow101
.dropzone{
边框：2个虚线#0087F7；
边界半径：5px；
背景：白色；
}
@*更改了id*@
“将SVG文件放到此处或单击上载”


“只接受SVG文件类型。光栅化img文件类型即将推出。”
//您的表单id中有一个破折号，请更改它
Dropzone.options.demoUpload={
paramName:“file”，//将用于传输文件的名称
最大文件大小：1000，//MB'
maxFiles:1，
init：函数（）{
this.on（“addedfile”，函数（文件）{alert（“file added.”）；}）；
}
};

我们之间唯一的主要区别是，我没有表单元素的

enctype=“multipart/form data”

部分，所以我添加了它，但同样的结果仍然存在。尽管如此，我非常感谢你们的帮助，我也非常愿意接受你们的其他想法。你能告诉我我是否能把我的调试和你的比较一下吗？是的，我该如何给你我的代码？（我是这个网站的新手）你应该继续编辑你的问题。你可以从编辑你的问题开始，然后把破折号拿出来。明白了，马上就可以了。另外，作为javascript的测试代码都包含在html的头部。我的JS在主体中被引用到另一个JS。这会有所不同吗？

<!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>