Question

这个问题看似简单：在将文件上传和上传到服务器并将其信息存储在名为FilePath的表中时，我需要CaseId作为输入。

我创建了一个带有表单的视图（索引），该表单将其输入发送到视图UplaodDnD，其中可以通过DragnDrop上传文件。 DragnDrop通过Jquery / Ajaxscript进行管理。该脚本调用UploadDnD POST Action，但由于某种原因不存储传递的CaseID字段。

控制器确保实际上载文件并将值分配给FilePath模型的某些字段。我认为将CaseID字段添加到UploadDnD表单应该可以解决问题，但显然不行。我应该如何将caseId上的传递分配给FilePath？

我的代码在索引页面上触发所需的caseId：

<form method="post" action="UploadDnD/UploadDnD">
    <div>Please provide CaseId</div>
    <input type="number" name="caseId" />    
    <input type="submit" value="" />
</form>

UploadDnd页面包含以下代码：

@model BeagleNose.Models.FilePath
@{ViewData["Title"] = "Index";}

<form method="post" enctype="multipart/form-data">
   <div id="fileBasket" class="filebasket">
       Drag-n-Drop files here.
       <br /><br /><br />
       End of Dropzone
   </div>
   <div class="form-group">
       <input asp-for="CaseID" value="@ViewBag.selectedCase"class="form-control" />
   </div>
   <img id="progress" src="~/Images/progress.gif" />
</form>

获取和发布的UploadDnD操作方法

public IActionResult UploadDnD(int? caseId)
    {
        if(caseId != null)
        {
            ViewBag.selectedCase = caseId;
        }
        return View();
    }

[HttpPost]
public IActionResult UploadFiles([Bind("CaseID,CandidateID,ArchiveSet")] FilePath filePath)
        {
        long size = 0;
        var files = Request.Form.Files;  

        foreach (var file in files)
        {
            string filename = hostingEnv.WebRootPath + $@"\bcontent\{file.FileName}";
            size += file.Length;
            using (FileStream fs = System.IO.File.Create(filename))
            {
                file.CopyTo(fs);
                fs.Flush();
            }

            filePath.FileName = file.FileName;
            filePath.FileType = FileType.ContractFile;
            filePath.ContentType = file.ContentType;
            filePath.DocPath = filename;
            _context.Add(filePath);
        }
        _context.SaveChangesAsync();

        string message = $"{files.Count} files(s) / {size} bytes uploaded successfully!";
        return Json(message);
    }

最后是Jquery / Ajax脚本

$(document).ready(function () {

$("#progress").hide();

$("#fileBasket").on("dragenter", function (evt) {
    evt.preventDefault();
    evt.stopPropagation();
});

$("#fileBasket").on("dragover", function (evt) {
    evt.preventDefault();
    evt.stopPropagation();
});

$("#fileBasket").on("drop", function (evt) {
    evt.preventDefault();
    evt.stopPropagation();

    var files = evt.originalEvent.dataTransfer.files;
    var fileNames = "";

    if (files.length > 0) {
        fileNames += "Uploading <br />"
        for (var i = 0; i < files.length; i++) {
            fileNames += files[i].name + "<br />"
        }
    }
    $("#fileBasket").html(fileNames)

    var data = new FormData();
    for (var i = 0; i < files.length; i++) {
        data.append(files[i].name, files[i]);
    }

    $.ajax({
        type: "POST",
        url: "/UploadDnD/UploadFiles",
        contentType: false,
        processData: false,
        data: data,
        success: function (message) {
            $("#fileBasket").html(message);
        },
        error: function () {
            $("#fileBasket").html
                ("There was error uploading files!");
        },
        beforeSend: function () {
            $("#progress").show();
        },
        complete: function () {
            $("#progress").hide();
        }
    });
});
});

Answer 1

以你的形式

<input type="number" name="caseId" id="caseId" />

在您的AJAX调用之前，只需将其值附加到数据。

data.append("caseId", $("#caseId").val());
$.ajax({
        type: "POST",
        url: "/UploadDnD/UploadFiles",
        contentType: false,
        processData: false,
        data: data,
        success: function (message) {
            $("#fileBasket").html(message);
        },
        error: function () {
            $("#fileBasket").html
                ("There was error uploading files!");
        },
        beforeSend: function () {
            $("#progress").show();
        },
        complete: function () {
            $("#progress").hide();
        }
    });

您将在控制器中获得caseId。希望这会有所帮助。

如何在通过Ajax发布时使用表单输入而不是通过提交

1 个答案: