Question

亲爱的朋友，我目前正在为用户创建一个管理面板，他们可以在其中轻松地发布文章。我也想在表单中添加一个文件上传器，但不幸的是我在POST方法中遇到了DROPZONEJS.JS文件的问题。主要问题是我无法为项目的本地文件提供URL以便下载到该文件，网站将在其中访问这些文件以使用当前文章的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＃问题？无论如何，我稍微检查了一下您的代码，并对可能出现的问题有了一些想法。

首先，您有2个DIV容器，它们用作Dropzone元素，为它们分配了css类“ dropzone”。此外，您还可以使用ASP.Net HTML-Helper生成FORM元素。

默认情况下，使用Dropzone有2个选项。

通过将css类“ dropzone”分配给任何HTML元素来进行声明式实例化。 Dropzone自动发现所有具有class =“ dropzone”的DOM元素并实例化它们。
以编程方式实例化：通过将容器元素的ID和包含OPTIONS的POST URL传递给Dropzone构造函数来实例化Dropzone。

声明式战区

您必须注意以下细节：如果将FORM元素用作Dropzone容器元素，则Dropzone将FORM元素的“ action”属性用作发布URL。但是如果你用将DIV元素作为容器，则很可能会遇到JavaScript错误。因为DIV元素通常不具有“动作”属性。如果将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)

在这种情况下，您有两个选择可以解决问题：

使用FORM元素代替DIV作为Dropzone容器。
在您的DIV元素中添加action =“ / your / post / url”，用作Dropzone容器。

我更喜欢第一个选项。因为DIV元素具有动作属性并不常见。

Dropzone文件上传

1 个答案: