dropzone多个区域的形式相同答案

【问题标题】：dropzone multiple area's in same formdropzone多个区域的形式相同
【发布时间】：2015-06-11 19:35:11
【问题描述】：

我正在制作复杂的表单并且我想使用多个（不同的）dropzone.js 来上传文件。

这是我的制作方法：

@using (Html.BeginForm())
{
    @Html.AntiForgeryToken()
... form elements...
<div id="files" name="files" class="dropzone"></div>
}

还有 JS：

Dropzone.options.files = {
    autoProcessQueue: false,
    uploadMultiple: true,
    parallelUploads: 100,
    maxFiles: 100,

    paramName: "file", // The name that will be used to transfer the file
    maxFilesize: 8, // MB
    url: "/pathToAction"
};

我想同时发送表单的文件和数据，都映射到一个对象到控制器但dropzone需要有“url”才能接受文件上传......如何解决这个问题？或许我可以获取表单元素的url，放入url参数中？

【问题讨论】：

我处理这种情况的方法是在我的控制器中设置一个上传方法，该方法在本地保存上传的所有文件。然后，当用户提交表单时，我只是将文件保存在他们需要通过引用保存的位置。当文件被删除时，这种方式当然有一些 javascript 处理，我必须为我的文件保留一些鉴别器，但它适用于所有类型的文件并且是可靠的。如果您对这种方式感兴趣，我可以为此提供代码，所以请告诉我...

标签： javascript jquery asp.net asp.net-mvc dropzone.js

【解决方案1】：

当我在谷歌上搜索时，没有办法用相同的 URL 发送多个“dropzone”的请求，所以我通过以下步骤手动解决了这个问题：

1) Dropzone实际上将图像更改为Base64字符串以进行缩略图预览，然后将该字符串添加到“img”标签的来源。因此，您需要读取该图像“src”和“alt”，并将它们添加到动态隐藏的输入类型中，如下所示：

    $('#btnUpload').on('click', function () {
        $.each($("img[data-dz-thumbnail]"), function( index, value ) {
            $('<input>').attr({
                type: 'hidden',
                name: 'myHiddenFiles[' + index + '].Key',
                value: $(value).attr("alt")
            }).appendTo('#newsForm');

            $('<input>').attr({
                type: 'hidden',
                name: 'myHiddenFiles[' + index + '].Value',
                value: $(value).attr("src")
            }).appendTo('#upload-Invoices');
        });
        $("#upload-Invoices").submit();
    });

为您需要发布其数据的每个放置区重复此代码。

2) 在您的操作方法上，您需要添加一个类型为“字典”的参数，以便获取 Base64 字符串格式的文件名和文件内容。然后您可以将 Base64 字符串解析为图像，将其存储为文件并将表单数据保存到数据库中。可以看到相关的sn-p代码如下：

        [HttpPost]
        [ValidateAntiForgeryToken]
        public ActionResult Create(ModelClass model, IDictionary<string, string> myHiddenFiles)
        {
            if (ModelState.IsValid)
            {
                foreach (var file in myHiddenFiles)
                {
                    var base64 = file.Value.Substring(file.Value.IndexOf(',') + 1).Trim('\0');
                    var bytes = Convert.FromBase64String(base64);

                    var saveFile = Server.MapPath("~/Images/" + file.Key);
                    System.IO.File.WriteAllBytes(saveFile, bytes);

                    // Save your model to database....
                }
            }
            return View();
        }

【讨论】：

如果我没记错的话，这只适用于图像。
这对我来说是个问题！

【解决方案2】：

您可以使用 @Url.Action 帮助程序创建操作路径

  ...
  paramName: "file", // The name that will be used to transfer the file
  maxFilesize: 8, // MB
  url: "@Url.Action("actionname")"
};

【讨论】：