无法从 View 的 <input> 标记获取/设置 IFormFile 对象答案

【问题标题】：Cannot get/set IFormFile object from <input> tag of View无法从 View 的 <input> 标记获取/设置 IFormFile 对象
【发布时间】：2017-06-15 13:01:28
【问题描述】：

我有一个上传机制，在视图中看起来像这样：

 <div  method="post" enctype="multipart/form-data">
        <input type="hidden" id="ProjectId" name="ProjectId" value="@Model.ProjectId"/>
        <input type="hidden" id="Name" name="Name" value= "" />
        <input type="hidden" id="Id" name="Id" value="" />
        <div class="col-md-10">
            <div class="form-group">
                <input type="file" asp-for="InputFile"  value="test" name="inputfile" onchange="ChooseInputFileButtonChanged(this);" id="ChooseInputFile"/>
                <input type="submit" value="Upload" id="UploadInputFileButton" onclick="UploadInstallIntructions();"/>
            </div>
        </div>
    </div>

这是我的 uploadinstructions() 方法，当用户按下“上传”按钮时会调用该方法。

script>
    function UploadInstallIntructions() {
        var name = document.getElementById('SoftwareVersionName').value;
        var id = document.getElementById("Id").value;
        var iFormFile = document.getElementById("ChooseInputFile").files[0];
        $.ajax({
            type: "POST",
            url: '@Url.Action("UploadInputFile", "SoftwareVersion")',
            data: { projectId: @Model.ProjectId, Name: name, Id: id, inputFile: iFormFile},
            cache: false,
            success: function (response) {
                window.location.href = response;
            }
        });
        return data;
    }
</script>

所以这是一个简单的 ajax 调用，它使用指定的参数调用我的控制器上的方法。我的问题是最后一个参数应该是 IFormFile 类型的文件数据，以便我可以在我的控制器中使用它，但没有设置。有没有更好的方法可以在我的视图中绑定我的 IFormFile 对象？通常只是一行：

input type="file" asp-for="InputFile" value="test" name="inputfile" onchange="ChooseInputFileButtonChanged(this);" id="ChooseInputFile"/>

应该可以绑定 IFormFile。

编辑：不是how to append whole set of model to formdata and obtain it in MVC 的重复项，因为我的问题不是与 FormData 绑定，而是 IFormFile 不是从视图自动创建的。

【问题讨论】：

您不需要使用FormData 来使用 ajax 发布文件并设置正确的 ajax 选项。参考this answer
@StephenMuecke 我尝试了你的解决方案，我确实得到了一个模型，但里面的一切都是空或 0。此处显示的视图代码也是部分视图，如果这有助于解释此行为。 UploadInstructions 方法在父视图中，但无论如何都是这样。所以我仍然没有 IFormFile。
那你没做对:)
不，也许你错过了什么。仅当我将数据手动添加到该 formData 对象时才有效： formData.append("SoftwareVersion.Name", name);等
我没有错过任何东西。阅读我给你的链接！而且您的代码正在向响应中添加属性Name: name，而不是SoftwareVersion.Name: name！而且您使用甚至不存在的元素的值分配name 的事实（代码中没有带有`id="SoftwareVersionName" 的元素）表明您还有其他问题，尤其是您这样做不懂模型绑定）

标签： javascript ajax asp.net-core-mvc

【解决方案1】：

一旦我上传了这样的图像文件..

$('input[type="file"]').ajaxfileupload({
    'action': 'uploadFile.jsp',
    'cache': false,
    'onComplete': function(response) {
        $('#upload').hide();
        BootstrapDialog.show({
            title: 'Alert!',
            message: 'Image Upload Successfully',
            buttons: [{
                label: 'Ok',
                action: function(dialog) {
                    dialog.close();
                }
            }]
        });

        var img_src = "../profilepic/" + response;
        setTimeout(5000);
        $("#image").attr("src", img_src);
    },
    'onStart': function() {
        $('#upload').show();
    }
});

<input type="file" name="datafile" accept="image/*"/><br/>
<div id="upload" style="display:none;">Uploading..</div>

如果您想上传这样的文件，请访问此链接 jQuery.AjaxFileUpload.js

【讨论】：

这只是一段代码，我已经完成了。我希望它会帮助你。我使用 jQuery.AjaxFileUpload.js 上传文件。

【解决方案2】：

试试下面的代码：

    <form name="UpdateInstall" id="UpdateInstall" method="post" enctype="multipart/form-data">
        <input type="hidden" id="ProjectId" name="ProjectId" value="@Model.ProjectId"/>
        <input type="hidden" id="Name" name="Name" value= "" />
        <input type="hidden" id="Id" name="Id" value="" />
        <div class="col-md-10">
            <div class="form-group">
                <input type="file" asp-for="InputFile"  value="test" name="inputfile" onchange="ChooseInputFileButtonChanged(this);" id="ChooseInputFile"/>
                <input type="submit" value="Upload" id="UploadInputFileButton" onclick="UploadInstallIntructions();"/>
            </div>
        </div>
    </form>

        <script>
            function UploadInstallIntructions() {
                var formData = new FormData($("#UpdateInstall")[0]);
                $.ajax({
                    type: "POST",
                    url: '@Url.Action("UploadInputFile", "SoftwareVersion")',
                    data: formData,
                    processData: false,
                    contentType: false,
                    success: function (response) {
                        window.location.href = response;
                    }
                });
                return data;
            }
        </script>

【讨论】：