Dropzone，如何使用数据和多个图像提交表单？ [英] Dropzone, how do I submit form with data and multiple images?

问题描述

我在ASP.NET中使用MVC，并希望在我的视图中使用Drag n Drop。我想在我的控制器中调用一个函数来删除图像以验证它们并向用户显示OK。当用户输入完信息并删除相应的图像后，他/她点击Fortsæt（继续）并在表单上调用提交。



删除图像时应该调用此方法。

I am using MVC in ASP.NET and want a Drag n Drop in my view. I would like to call a function in my controller when the images are dropped to verify them and show an OK to the user. When the user has finished typing in information and dropped the appropriate images he/she clicks "Fortsæt" (continue) and calls submit on the form.

This method should be called when an Image is dropped.

[HttpPost]
[Authorize(Roles = "host")]
public ActionResult UploadImages()
{
    bool suc;
    foreach (string s in Request.Files)
    {
        HttpPostedFileBase image = Request.Files[s];

        string fileName = Request.Headers["X-File-Name"];
        string fileExtension = "";
        if (!string.IsNullOrEmpty(fileName))
            fileExtension = Path.GetExtension(fileName);


        suc = VerifyImages();
    }
    return Json(suc);
}

当用户点击继续时应该调用

This should be called when the user clicks "Continue"

[HttpPost]
[Authorize(Roles = "host")]
public ActionResult Create(FleaMarket model, HttpPostedFileBase[] images)
{
    ConditionallySetUser(model, User);

    foreach (var fileName in Request.Files)
    {
        HttpPostedFileBase file = Request.Files[fileName.ToString()];
        if (file != null && file.ContentLength > 0)
        {
            var image = HttpPostedFileBaseToByteArray(file);
            model.Images.Add(new FleaImage
                 {
                    Image = image, FleaMarketId = model.EventId
                 });
        }
    }

    db.FleaMarkets.Add(model);
    db.SaveChanges();

    ViewBag.HostID = new SelectList(db.Hosts, "HostId", "Name", model.HostId);
    TempData["market"] = model;
    return RedirectToAction("AddStallImage", "FleaMarket");
}

以下是我的View

Here are some snips of my View

@model FleaPortal.Models.Database.FleaMarket
<link href="~/Content/basic.css" rel="stylesheet" />
<link href="~/Content/dropzone.css" rel="stylesheet" />
<script src="~/Scripts/dropzone.min.js"></script>

@using (Html.BeginForm("Create", "FleaMarket", method: FormMethod.Post, htmlAttributes: new { @encType = "multipart/form-data",@class="dropzone", @id="dropzoneForm"}))
{

   @Html.AntiForgeryToken()
   @Html.ValidationSummary(true)
   @Html.HiddenFor(model => model.HostId)
   <div class="row">
      <div class="form-group col-sm-6">
         @Html.LabelFor(model => model.HostId, "Arrangør")
         <label class="text-box single-line form-control" id="Name">
            @Html.DisplayFor(model => model.Host.UserProfile.UserName)
         </label>
      </div>

      <div class="form-group col-sm-6">
         @Html.LabelFor(model => model.Name)
         @Html.EditorFor(model => model.Name)
         @Html.ValidationMessageFor(model => model.Name)
      </div>
   </div>

    <div class="form-group col-sm-12">
        @Html.LabelFor(model => model.Description)
        @Html.EditorFor(model => model.Description, new { @class = "TextAreaInput" })
        @Html.ValidationMessageFor(model => model.Description)
    </div>
    ...
    ...
    <div class="form-group col-sm-12">
        <label>Stemningsbilleder</label>
        <div id="dropzonePreview">
            drop your images here
            <div class="dz-default dz-message" data-dz-message="">
            </div>
        </div>
    </div>
    ...
    ...
    <div class="btn-group two-bt-group col-sm-12">
        <button name="ButtonType" value="Continue" id="submitAll" type="submit" class="btn btn-success two-bt">@Resources.Views_Global_Continue</button>
        <button name="ButtonType" value="Cancel" type="button" class="btn btn-danger two-bt" onclick="location.href='@Url.Action("Manage", "Account")'">@Resources.Views_Global_Cancel</button>
    </div>
    @section Scripts {
    @Scripts.Render("~/bundles/datepicker")
    @Scripts.Render("~/bundles/booking")
@Scripts.Render("~/bundles/dropzonescripts")

    <script type="text/javascript">
        $(document).ready(function() {
            $(".form_date").datetimepicker({ format: 'yyyy-mm-dd', startView: 2, minView: 2 });
            $(".form_time").datetimepicker({ format: 'hh:ii', startView: 1, maxView: 1 });
        });
    </script>
    <script>
        Dropzone.options.dropzoneForm = {
            clickable: false,
            //url: '/FleaMarket/UploadImages',
            autoProcessQueue: false,
            uploadMultiple: true,
            paramName: "images",// Must match the name of the HttpPostedFileBase argument that the Upload action expects
            maxFiles: 100,
            autoQueue: false,
            previewsContainer: "#dropzonePreview",
            parallelUploads:100,
            init: function () {
                debugger;
                this.on("success", function (file, responseText) {
file.previewTemplate.appendChild(document.createTextNode(responseText));
                });
            }
        };
  </script>
    <pre>

I have spent way too much time trying to figure this out, and I believe there might be a simple solution - I just don't know. ? Can someone help me figuring this out?

Many thanks in advance.

推荐答案

（ document ).ready( function （）{

(document).ready(function() {

（ 。form_date）。datetimepicker（{format：' yyyy-mm-dd'，startView： 2 ，minView： 2 }）;

(".form_date").datetimepicker({ format: 'yyyy-mm-dd', startView: 2, minView: 2 });

（ 。form_time）。datetimepicker（{format ：' hh：ii'，startView： 1 ，maxView： 1 }）;
}）;
< / script >
< script >
Dropzone.options.dropzoneForm = {
clickable： false ，
// url：'/ FleaMarket / UploadImages'，
autoProcessQueue：< span class =code-keyword> false ，
uploadMultiple： true ，
paramName： images， // 必须与上载操作所需的HttpPostedFileBase参数的名称匹配
maxFiles： 100 ，
autoQueue： false ，
previewsContainer： ＃dropzonePreview，
parallelUploads： 100 ，
init：功能（）{
调试器;
此 .on（ success， function （file，responseText）{
file.previewTemplate.appendChild（ document .createTextNode（responseText））;
}）;
}
};
< / script >
< pre >

我花了太多时间试图解决这个问题，我相信可能有一个简单的解决方案 - 我只是不知道。 ？有人可以帮我解决这个问题吗？

非常感谢提前。

(".form_time").datetimepicker({ format: 'hh:ii', startView: 1, maxView: 1 }); }); </script> <script> Dropzone.options.dropzoneForm = { clickable: false, //url: '/FleaMarket/UploadImages', autoProcessQueue: false, uploadMultiple: true, paramName: "images",// Must match the name of the HttpPostedFileBase argument that the Upload action expects maxFiles: 100, autoQueue: false, previewsContainer: "#dropzonePreview", parallelUploads:100, init: function () { debugger; this.on("success", function (file, responseText) { file.previewTemplate.appendChild(document.createTextNode(responseText)); }); } }; </script> <pre> I have spent way too much time trying to figure this out, and I believe there might be a simple solution - I just don't know. ? Can someone help me figuring this out? Many thanks in advance.

这篇关于Dropzone，如何使用数据和多个图像提交表单？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！