Question

我正在使用dropzone.js来实现拖放功能来上传文件。它正在发挥作用。我不明白的是为什么我不能限制文件大小和文件扩展名。我认为我有它的代码，但它不会这样做。

在cshtml页面中：

<script src="~/js/dropzone.js"></script>
<link href="~/css/dropzone.css" rel="stylesheet" />

<script>
    Dropzone.options.dropzone = {
        paramName: "file", // The name that will be used to transfer the file
        maxFilesize: 2, // MB
        acceptedFiles: ".png,.jpg,.gif,.bmp,.jpeg",
        accept: function (file, done) {
            if (file.name == "justinbieber.jpg") {
                done("Naha, you don't.");
            }
            else { done(); }
        }
    };
</script>

<div class="row">
    <div class="col-md-9">
        <div id="dropzone">
            <form action="Upload" class="dropzone needsclick dz-clickable" id="uploader">
                <div class="dz-message needsclick">       
                    Drop files here or click to upload.<br>
                </div>
            </form>
        </div>
    </div>
</div>

在HomeController中

[HttpPost]
public async Task<IActionResult> Upload(IFormFile file)
{
    var uploads = Path.Combine(_environment.WebRootPath, "images");
    if (file.Length > 0)
        using (var fileStream = new FileStream(Path.Combine(uploads, file.FileName), FileMode.Create))
            await file.CopyToAsync(fileStream);

    return RedirectToAction("About");
}

我的意思是，代码是由他们给出的，我有dropzone.js和dropzone.css，就像他们告诉我们做的那样仍然......事情是，它正在发挥作用。它上传，转到后面的代码。一切。我只是不能应用这些限制，即使它们在那里......

有没有人知道这里发生了什么？

Answer 1

您已在与表单不同的Dropzone上设置选项。 From the docs：

Dropzone会找到带有dropzone类的所有表单元素，自动将其自身附加到它上面，并将放入其中的文件上传到指定的action属性。

因此，您的<form>，类dropzone会自动设置为Dropzone。

Again from the docs，要设置Dropzone的选项，请使用Dropzone.options.myAwesomeDropzone = {}，其中：

//＆＃34; myAwesomeDropzone＆＃34;是HTML元素的ID
的驼峰版本

在您的代码中，您使用Dropzone.options.dropzone，因此您将这些选项应用于ID为dropzone的Dropzone。在您的HTML中，这是<div>，而不是您现有的<form> Dropzone。因此，当您将文件拖放到<form>时，您指定的那些选项无关紧要 - 他们会选择不同的Dropzone（实际上从未实例化过）！

删除<div id="dropzone">，并将选项上的标识符更改为Dropzone.options.uploader，以便它们适用于您的表单Dropzone。

使用dropzone.js拖放文件上传

1 个答案: