为什么我的Dropzone无法正常工作

Question

i used this tutorial for create dropzone area in my web application mvc 5. 我使用本教程在Web应用程序mvc 5中创建了dropzone区域。

http://www.codeproject.com/Articles/874215/File-upload-in-ASP-NET-MVC-using-Dropzone-JS-and-H http://www.codeproject.com/Articles/874215/File-upload-in-ASP-NET-MVC-using-Dropzone-JS-and-H

but when i drag and drop my image, the dropzone layout doesn't work. 但是当我拖放图像时，dropzone布局不起作用。 below is my code: 下面是我的代码：

_layout _布局

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@ViewBag.Title - My ASP.NET Application</title>
    @Styles.Render("~/Content/css")
    @Styles.Render("~/Content/dropzonescss")
    @Scripts.Render("~/bundles/modernizr")
</head>
<body>
    <div class="navbar navbar-inverse navbar-fixed-top">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                @Html.ActionLink("Application name", "Index", "Home", null, new { @class = "navbar-brand" })
            </div>
            <div class="navbar-collapse collapse">
                <ul class="nav navbar-nav">
                    <li>@Html.ActionLink("Home", "Index", "Home")</li>
                    <li>@Html.ActionLink("About", "About", "Home")</li>
                    <li>@Html.ActionLink("Contact", "Contact", "Home")</li>
                </ul>
            </div>
        </div>
    </div>
    <div class="container body-content">
        @RenderBody()
        <hr />
        <footer>
            <p>&copy; @DateTime.Now.Year - My ASP.NET Application</p>
        </footer>
    </div>

    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/bootstrap")
    @Scripts.Render("~/bundles/dropzonescripts")
    <script type="text/javascript">

        Dropzone.options.dropzoneJsForm = {

            //prevents Dropzone from uploading dropped files immediately
            autoProcessQueue: false,

            init: function () {
                var submitButton = document.querySelector("#submit-all");
                var myDropzone = this; //closure

                submitButton.addEventListener("click", function () {

                    //tell Dropzone to process all queued files
                    myDropzone.processQueue();
                });

            }
        };

    </script>

    @RenderSection("scripts", required: false)
</body>
</html>

Index 指数

@{
    ViewBag.Title = "Home Page";
}


<form action="~/Home/SaveUploadedFile" method="post" class="dropzone" id="Dropzone.options.dropzoneJsForm" >
    <div class="fallback">
        <input name="file" type="file" multiple />
        <input type="submit" value="Upload" />
    </div>
</form>

homecontroller 家庭控制器

public ActionResult SaveUploadedFile()
{
    bool isSavedSuccessfully = true;
    string fName = "";
    try
    {
        foreach (string fileName in Request.Files)
        {
            HttpPostedFileBase file = Request.Files[fileName];
            //Save file content goes here
            fName = file.FileName;
            if (file != null && file.ContentLength > 0)
            {

                var originalDirectory = new DirectoryInfo(string.Format("{0}Images\\WallImages", Server.MapPath(@"\")));

                string pathString = System.IO.Path.Combine(originalDirectory.ToString(), "imagepath");

                var fileName1 = Path.GetFileName(file.FileName);

                bool isExists = System.IO.Directory.Exists(pathString);

                if (!isExists)
                    System.IO.Directory.CreateDirectory(pathString);

                var path = string.Format("{0}\\{1}", pathString, file.FileName);
                file.SaveAs(path);

            }

        }

    }
    catch (Exception ex)
    {
        isSavedSuccessfully = false;
    }


    if (isSavedSuccessfully)
    {
        return Json(new { Message = fName });
    }
    else
    {
        return Json(new { Message = "Error in saving file" });
    }
}

BundleConfig add BundleConfig添加

bundles.Add(new StyleBundle("~/Content/dropzonescss").Include(
         "~/Scripts/dropzone/css/basic.css",
         "~/Scripts/dropzone/css/dropzone.css"));
bundles.Add(new ScriptBundle("~/bundles/dropzonescripts").Include(
         "~/Scripts/dropzone/dropzone.js"));

I have no idea why it behaves this way. 我不知道为什么会这样。 The loading part is working properly, but the graphics is wrong and looks like: 加载部分工作正常，但是图形错误，看起来像：

在此处输入图片说明

Answer 1

It looks like the dropzone nuget package doesn't create the \\css sub folder for the dropzone css files, so the bundle config is incorrect. 似乎dropzone nuget软件包没有为dropzone css文件创建\\ css子文件夹，因此捆绑软件配置不正确。 (well it is correct but the folder isn't there). （嗯，这是正确的，但是文件夹不存在）。

Create the folder scripts\\dropzone\\css (and move the css files from the scripts\\dropzone folder to that new folder) 创建文件夹scripts \\ dropzone \\ css（并将css文件从scripts \\ dropzone文件夹移至该新文件夹）

You can see how the dropzone folder should look by looking at the solution that is on github: 您可以通过查看github上的解决方案来查看dropzone文件夹的外观：

Dropzone example solution Dropzone示例解决方案

为什么我的Dropzone无法正常工作

问题描述

1 个解决方案

解决方案1
1 已采纳 2015-06-29 10:56:54

为什么我的Dropzone无法正常工作

问题描述

1 个解决方案

解决方案1 1 已采纳 2015-06-29 10:56:54

解决方案1
1 已采纳 2015-06-29 10:56:54