Dropzone FileUpload

Question

亲爱的朋友们，我目前正在为用户创建一个管理面板，他们可以很容易地发布他们的文章。我还想在我的表单中添加一个小文件上传程序，但遗憾的是，我在POST方法中的DROPZONEJS.JS文件遇到了一些问题。主要的问题是我不能给项目的本地文件的网址，以便下载到那里的文件，网站将访问这些文件，以便与当前文章的id发布它们。如果有什么不能理解的地方，请告诉我。

@{
    ViewBag.Title = "Uppy";
}
@{
    Layout = "~/Views/Shared/_AdminLayout.cshtml";
}
    <div class="content d-flex flex-column flex-column-fluid" id="kt_content">
        <!--begin::Entry-->
        <div class="d-flex flex-column-fluid">
            <!--begin::Container-->
            <div class="container">
                <!--begin::Card-->
                <div class="card card-custom gutter-b">
                    <div class="card-header">
                        <div class="card-title">
                            <h3 class="card-label">File Upload</h3>
                        </div>
                    </div>
                    <!--begin::Form-->
                    <form>
                        <div class="card-body">
                            <div class="form-group row">
                                <label class="col-form-label col-lg-3 col-sm-12 text-lg-right">Multiple File Upload</label>
                                <div class="col-lg-4 col-md-9 col-sm-12">
                                    <div class="dropzone dropzone-default dropzone-primary" id="kt_dropzone_2">
                                        <div class="dropzone-msg dz-message needsclick">
                                            <h3 class="dropzone-msg-title">Drop files here or click to upload.</h3>
                                            <span class="dropzone-msg-desc">Upload up to 10 files</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="form-group row">
                                <label class="col-form-label col-lg-3 col-sm-12 text-lg-right">File Type Validation</label>
                                <div class="col-lg-4 col-md-9 col-sm-12">
                                    <div class="dropzone dropzone-default dropzone-success" id="kt_dropzone_3">
                                        <div class="dropzone-msg dz-message needsclick">
                                            <h3 class="dropzone-msg-title">Drop files here or click to upload.</h3>
                                            <span class="dropzone-msg-desc">Only image, pdf and psd files are allowed for upload</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        @using (Html.BeginForm("Uppy",
                            "FileUpload",
                            FormMethod.Post,
                            new { enctype = "multipart/form-data" })) //multipart/form-data gives functionlity to inputes (search at web);
                        {
                            <div class="card-footer">
                                <div class="row">
                                    <div class="col-lg-3"></div>
                                    <div class="col-lg-4">
                                        <input type="submit" value="Submit" class="btn btn-light-primary mr-2" />
                                        <button type="reset" class="btn btn-primary">Cancel</button>
                                    </div>
                                    
                                </div>
                            </div>
                          }
                        </form>
                    <!--end::Form-->
                </div>
                <!--end::Card-->
                <!--end::Row-->
            </div>
            <!--end::Container-->
        </div>
        <!--end::Entry-->
    </div>
    <!--end::Content-->

顺便说一句，我自己的上传代码工作正常，也将选定的文件发送到我在控制器中编写的url位置。

    <label for="file">Upload File:</label>
    <input type="file" name="file" id="file" class="btn-hover-bg-success" />
    <br>
    <br>
    <input type="submit" value="Upload Image" />
    <br>
    <br>
    @ViewBag.Message

这是我的FileUploadController：

 [HttpPost]
    public ActionResult Uppy(HttpPostedFileBase file)
    {
        ADAPTIVE_TESTEntities ent = new ADAPTIVE_TESTEntities();
        Adaptive.News.Models.NEWS news = new Adaptive.News.Models.NEWS();
        if (file != null && file.ContentLength > 0)
            try
            {
                var path = Path.Combine(Server.MapPath("~/Content/images"),
                                           Path.GetFileName(file.FileName));
                file.SaveAs(path);
                news.PICTUREPATH = path;
                ent.NEWS.Add(news);
                ent.SaveChanges();
                ViewBag.Message = "File uploaded successfully";
            }
            catch (Exception ex)
            {
                ViewBag.Message = "ERROR: " + ex.Message.ToString();
            }
        else
        {
            ViewBag.Message = "You have not specified a file.";
        }
        return View();
    }

Answer 1

对我来说，你的问题到底是什么，在哪里，我并不清楚。你说有问题是什么意思。你对Dropzone.JS或C#有什么问题？无论如何，我稍微检查了一下您的代码，知道您的问题可能是什么。

首先:您有两个DIV容器，您可以使用它们作为Dropzone元素，为它们分配css类"dropzone“。此外，您可以使用ASP.Net HTML-Helper生成一个表单元素。

默认情况下，您有两个使用Dropzone的选项。

通过将css类“”分配给任何

1. 元素来实现dropzone声明性实例化。

自动发现所有带有Dropzone“dropzone”的DOM元素并实例化它们。

1. Programmatically实例化:通过将容器元素的id和包含POST URL的选项传递给Dropzone构造函数来实例化Dropzone。

声明性DROPZONE

您必须注意这个细节:如果您使用FORM元素作为Dropzone容器元素，则Dropzone将使用FORM元素的"action“属性作为post URL。但是如果你使用DIV元素作为容器，那么你很可能会得到一个JavaScript错误。因为DIV元素通常没有"action“属性。如果你使用DIV作为Dropzone容器(并且在你的代码中使用了2次)，你会得到下面的JavaScript错误：

dropzone.js:1027 Uncaught Error: No URL provided.
    at new Dropzone (dropzone.js:1027)
    at dropzone.js:2907
    at Function.Dropzone.discover (dropzone.js:2919)
    at Dropzone._autoDiscoverFunction (dropzone.js:3491)
    at HTMLDocument.init (dropzone.js:3456)

在这种情况下，您有两个选项来解决问题：

1. 将表单元素而不是DIV作为Dropzone action=“//
   1. /url”添加到您用作Dropzone容器的DIV元素中。

我更喜欢第一种选择。因为DIV元素具有action属性并不常见。