Question

我使用Dropzone上传图片。我需要通过它发送一些其他值（一些文本值）。在我的场景中，我需要将产品名称发送到控制器（请参阅代码中的一些注释）

当按钮点击时，图像成功进入控制器侧。

HTML代码

 <input type="text" name="text" id="txtprod" class="form-control" />

<div id="dropzonffe" style="width: 55%; margin-left: 25%">
    <form action="~/Admin/SaveProducts" class="dropzone" id="dropzoneJsForm"></form>
</div>

Jquery代码

<script type="text/javascript">
Dropzone.options.dropzoneJsForm = {

    autoProcessQueue: false,
    init: function () {
        var submitButton = document.querySelector("#btnSubmit");
        var myDropzone = this;

        submitButton.addEventListener("click", function () {
            var ProductName = $("#txtprod").val();//<-- I want to send this Productname to the controller also.
            myDropzone.processQueue();
        });
    }
};
</script>

我的控制器

  public ActionResult SaveProducts()
    {
        bool isSavedSuccessfully = false;

        foreach (string fileName in Request.Files)
        {
            HttpPostedFileBase file = Request.Files[fileName];
            isSavedSuccessfully = true;
        }
        return Json(new { isSavedSuccessfully, JsonRequestBehavior.AllowGet });
    }

我需要将产品名称传递给控制器。我该怎么办？

Answer 1

我找到了问题的解决方案。我已将其粘贴以备将来帮助.DropZone中有一个名为sending的事件。您可以通过附加到表单数据传递其他参数。

 Dropzone.options.dropzoneJsForm = {
    autoProcessQueue: false,
    init: function () {
        var submitButton = document.querySelector("#btnSubmit");
        var myDropzone = this;

        this.on("sending", function (file, xhr, formData) {
            formData.append("ProductName", $("#txtprod").val());


        });

        submitButton.addEventListener("click", function () {
        myDropzone.processQueue();

        });

    }
};

在服务器端访问它

 public ActionResult SaveProducts(string ProductName)
    {

     }

Answer 2

您可以创建模型

public class ProductModel {
    public string Name {get;set;}
}

在表单内添加Name

<div id="dropzonffe" style="width: 55%; margin-left: 25%">
    <form action="~/Admin/SaveProducts" class="dropzone" id="dropzoneJsForm">
        @Html.EditorFor(m => m.Name);
    </form>
</div>
<button id="btnSubmit">Submit</button>

并传递Model的动作，来自输入的值将与文件一起发送。

public ActionResult SaveProducts(ProductModel product)
{
     // rest of the logic

Answer 3

将值作为隐藏字段添加到表单中，然后将它们发送到您的控制器

<form action="~/Admin/SaveProducts" class="dropzone" id="dropzoneJsForm">
    <input type="hidden" value="SomeVal" />

然后

public ActionResult SaveProducts(string SomeVal) 
{

   ..controller body
}

或FormCollection对象也可以正常工作

public ActionResult SaveProducts(FormCollection fc) 
{
     //use fc["SomeVal"]
   ..controller body
}

Dropzone还有其他一些参数

3 个答案: