与模型一起传递的 dropzone 图像

Question

我有一个包含多个输入（文本）的表单，在它们下方有一个拖放区。我需要将这些数据和图像一起传递到一个模型中。我有一个这样的模型：

public BannerItem bannerItem { get; set; }
public IFormFile imagefile { get; set; }

我正在使用 asp-for 之类的标签，但我不知道如何将 dropzone 图像绑定到图像文件。我试过 js 但它没有用。你能帮我解决这个问题吗？

Answer 1

这是您可以遵循的完整工作演示：

型号

public class TestVM
{
    public BannerItem bannerItem { get; set; }
    public IFormFile imagefile { get; set; }
}
public class BannerItem
{
    public int Id { get; set; }
    public string Name { get; set; }
}

查看（Index.cshtml）

@model TestVM
<form asp-action="Test" asp-controller="Home" method="post" enctype="multipart/form-data" class="dropzone dz-clickable form-horizontal form-bordered" id="dropzoneForm">
  <div class="form-group form-actions">
      <input asp-for="bannerItem.Name" />
    <div class="col-md-9 col-md-offset-4">
        <button type="submit" id="submit" class="btn btn-sm btn-primary"><i class="fa fa-floppy-o"></i> Upload</button>
    </div>
  </div>
</form>

@section Scripts
{
  <link rel="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.5.1/dropzone.css" />
  <script src="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.5.1/dropzone.js"> </script>
  <script>
       function myParamName() {
           return "imagefile";
        }
        Dropzone.options.dropzoneForm = {
            autoProcessQueue: false,
            paramName: myParamName, // The name that will be used to transfer the file
            uploadMultiple: true,
            parallelUploads: 100,
            init: function () {
                console.log("active");
                var wrapperThis = this;

                $("#submit").click(function (e) {
                    e.preventDefault();
                    wrapperThis.processQueue();
                });
            },
            accept: function (file, done) {
                done();
            }
        };

</script>
}

控制器

public class HomeController : Controller
{
    public async Task<IActionResult> Index()
    {
        return View();
    }
    [HttpPost]
    public async Task<ActionResult> Test(TestVM model)
    {
        //do your sufff...
    }
}

与模型一起传递的 dropzone 图像

dropzone image passing with a model

asp.net-core

dropzone