Question

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

删除Image时应调用此方法。

[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 = Verify(fileExtension);
        }
        return Json(suc);
    }

当用户点击“继续”

时，应该调用此方法

    [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");
    }

以下是我的观点的一些剪辑

@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>

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

非常感谢提前。

Answer 1

每次上传图片时，我最终都会在控制器中调用一个方法。我为imaged分配了一个ID并将其传递给我的视图：

 Dropzone.autoDiscover = false;
        $("div#dropzonePreview").dropzone(
            {
                url: '/FleaMarket/UploadImage',
                paramName: "images",
                autoProcessQueue: true,
                addRemoveLinks: true,
                //clickable: "#dropzonePreview",
                uploadMultiple: true,
                acceptedFiles: "image/*",
                maxFiles: 100,
                parallelUploads: 10,
                dictInvalidFileType: "Dette er ikke et billede",
                dictFileTooBig: "Billedet er for stort",
                success: function(file, response) {
                    $('#ImageIds').val($('#ImageIds').val() + "," + response.Ids);
                    done();
                }
            });


@Html.HiddenFor(model => model.ImageIds);
<div class="form-group col-sm-12">
    <label>Stemningsbilleder</label>
    <div id="dropzonePreview" class="dropzone">
    </div>
</div>

Dropzone，如何使用数据和多个图像提交表单？

1 个答案: