ASP.net core MVC Framework 5 Formdata在附加图像时类型不正确

Posted 2023-02-15

【中文标题】ASP.net core MVC Framework 5 Formdata在附加图像时类型不正确

【英文标题】：ASP.net core MVC Framework 5 Formdata not the right type when appending image

【发布时间】：2022-01-02 02:57:06

【问题描述】：

目标：我希望使用模型将图像从视图发布到控制器。

问题：将表单数据添加到ajax方法时，它说，

“未捕获的TypeError：无法构造'FormData'：参数1是 不是“htmlFormElement”类型的。”

我尝试过的：我进行了一些谷歌搜索并尝试将 HttpPostedFileWrapper 作为模型中的数据类型，但它说它不存在。我也尝试了错误所说的应该是什么，但这也不存在。

我正在使用 Framework 5 Asp.net 核心 MVC

型号：

using Microsoft.AspNetCore.Http;
using System.Web;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using System.Drawing;

namespace AirmotionEcommerceWebsite.Models.Admin

    public class AddWebProductModel
    

        public TwebProduct product  get; set; 

        public HttpPostedFileWrapper ThumbnailImageFile  get; set; 

    

javascript：

var UploadForm = function () 

        var thumbnail = $("#Thumbnailbrowse").get(0).files;
        
        var data = new FormData(this);
        data.append("ThumbnailImageFile", thumbnail[0]);

        $.ajax(

            type: "Post",
            url: "/admin/ProductAdd",
            data: data,
            contentType: false,
            processData: false,
            success: function (response) 

            
        );

    ;

错误：

Uncaught TypeError: Failed to construct 'FormData': parameter 1 is not of type 'HTMLFormElement'.
    at UploadForm (ProductAdd:494)
    at HTMLInputElement.onclick (ProductAdd:396)
UploadForm @ ProductAdd:494
onclick @ ProductAdd:396

完整产品添加视图：

@model AirmotionEcommerceWebsite.Models.Admin.AddWebProductModel
@
    ViewBag.Title = "ProductAdd";
    Layout = "~/Views/Shared/_AdminLayoutPage.cshtml";


<style>
    .PreviewImageThingy
        height: 10em;
    
</style>

<h2>Add a Product</h2>
<link href="~/css/Chosen/chosen.min.css" rel="stylesheet" />
<script src="~/js/Chosen/chosen.jquery.min.js"></script>
@using (Html.BeginForm("ProductAdd", "Admin", FormMethod.Post, new  @enctype = "multipart/form-data" ))

    @*@Html.AntiForgeryToken()*@

    <div class="form-horizontal">
        <hr />
        @Html.ValidationSummary(true, "", new  @class = "text-danger" )

        @Html.HiddenFor(Model => Model.product.IntWebProductId)
        @Html.HiddenFor(Model => Model.product.BlnIsDeleted)
        @Html.HiddenFor(Model => Model.product.DteCreated)


        <div class="form-group">
            <h5>Product Name</h5>
            <div class="col-md-10">
                @Html.EditorFor(model => model.product.StrProductName, new  htmlAttributes = new  @class = "form-control"  )
                @Html.ValidationMessageFor(model => model.product.StrProductName, "", new  @class = "text-danger" )
            </div>
        </div>

        <div class="form-group">
            <div class="form-group">
                <h5>Tags</h5>
                <div class="col-md-10">
                    @* Stuff here *@
                    @Html.ListBoxFor(Model => Model.product.SelectedIDArray, new MultiSelectList(ViewBag.TagsList, "IntWebTagId", "StrTagName"), new  @class = "chzn-select", multiple = "multiple" )

                </div>
            </div>
        </div>

        <div class="form-group">
            <h5>Thumbnail Image</h5>

            <div class="col-md-10">

                <input type="file" id="Thumbnailbrowse">
                <div id="imgPreview" class="thumbnail" style="display:none">
                    <img class="img-responsive PreviewImageThingy" id="targetImg" />
                    <div class="caption">
                        <a href="#" onclick="ClearPreview()"><i class="glyphicon glyphicon-trash"></i></a>
                        <span id="description"></span>
                    </div>
                </div>


            </div>
        </div>

        <div class="form-group">
            <h5>Images</h5>
            <div class="col-md-10">

                <h5>Upload Images</h5>
                <input type="file" multiple id="Item-Gallary-photo-add">
                <div class="gallery"></div>


            </div>
        </div>

        <div class="form-group">
            <h5>Is Product Active?</h5>
            <div class="col-md-10">
                <div class="checkbox">
                    @Html.EditorFor(model => model.product.BlnIsActive)
                    @Html.ValidationMessageFor(model => model.product.BlnIsActive, "", new  @class = "text-danger" )
                </div>
            </div>
        </div>

        <div class="form-group">
            <h5>Featured Item</h5>
            <div class="col-md-10">
                <div class="checkbox">
                    @Html.EditorFor(model => model.product.BlnIsFeatured)
                    @Html.ValidationMessageFor(model => model.product.BlnIsFeatured, "", new  @class = "text-danger" )
                </div>
            </div>
        </div>

        <div class="form-group">
            @
                List<SelectListItem> dataItems = ViewBag.InventoryItemList;
            
            <div class="form-group">
                <h5>Inventory System Item</h5>
                <div class="col-md-10">
                    @Html.DropDownListFor(model => model.product.IntItemId, dataItems, "-- Select --", new  @class = "form-control" )
                    @Html.ValidationMessageFor(model => model.product.IntItemId, "", new  @class = "text-danger" )
                </div>
            </div>
        </div>

        <div class="form-group">
            <h5>MSRP</h5>
            <div class="col-md-10">
                @Html.EditorFor(model => model.product.DecMsrp, new  htmlAttributes = new  @class = "form-control"  )
                @Html.ValidationMessageFor(model => model.product.DecMsrp, "", new  @class = "text-danger" )
            </div>
        </div>

        <div class="form-group">
            <h5>Description</h5>
            <div class="col-md-10">
                @Html.EditorFor(model => model.product.StrDescription, new  htmlAttributes = new  @class = "form-control"  )
                @Html.ValidationMessageFor(model => model.product.StrDescription, "", new  @class = "text-danger" )
            </div>
        </div>

        <div class="form-group">
            <h5>Specs</h5>
            <table class="table table-bordered table-hover">
                <tbody>
                    <tr>
                        <th scope="row">Static Pressure in Inches w.g.</th>
                        <td>@Html.EditorFor(x => x.product.StrStaticPressureIn)</td>
                    </tr>
                    <tr>
                        <th scope="row">Air Volume (CFM)</th>
                        <td>@Html.EditorFor(x => x.product.StrCfm)</td>
                    </tr>
                    <tr>
                        <th scope="row">Noise (sones)</th>
                        <td>@Html.EditorFor(x => x.product.StrNoise)</td>
                    </tr>
                    <tr>
                        <th scope="row">Fan Watts</th>
                        <td>@Html.EditorFor(x => x.product.StrWatts)</td>
                    </tr>
                    <tr>
                        <th scope="row">Duct Diameter</th>
                        <td>@Html.EditorFor(x => x.product.StrDiameter)</td>
                    </tr>
                    <tr>
                        <th scope="row">Power Rating</th>
                        <td>@Html.EditorFor(x => x.product.StrPowerRating)</td>
                    </tr>
                </tbody>
            </table>
        </div>

        <div class="form-group">
            <div class="col-md-offset-2 col-md-10">
                <input type="submit" name="Submit" class="btn btn-primary" onclick="UploadForm()" />
            </div>
        </div>
    </div>

【问题讨论】：

我刚刚尝试了这个，但没有运气。当我使用它时，我如何使用 FormData(this) 产品通过了，但图像没有。现在使用您的新方法 FormData(document.forms[0])，图像被传递，但不是产品。我是javascript新手，你能解释一下有什么区别吗？

布局中有多余的“表格”吗？然后使用'forms[1]'。我没有想法。

不，它似乎只添加一个或另一个像附加不起作用？感谢您的所有时间和帮助@PoulBak

我刚刚注意到<input type="submit" name="Submit"..... 尝试将其更改为：<input type="button" name="Submit".....。当您有 type="submit" 并调用 ajax 时，您的表单会发布两次！

很好，但不幸的是，这并没有解决问题。它仍然是 img 或产品。也许我使用的附加错误？

【参考方案1】：

您可以将 (HttpPostedFileWrapper) 替换为 (IFormFile) 我这会起作用！

【讨论】：

正如目前所写，您的答案尚不清楚。请edit 添加其他详细信息，以帮助其他人了解这如何解决所提出的问题。你可以找到更多关于如何写好答案的信息in the help center。

这很有帮助，不要听机器人的。感谢您的帮助！

【参考方案2】：

您正在使用：

var data = new FormData(this);

这里this应该是一个表单元素。

试试这个：

var data = new FormData(document.forms[0]);

现在data 将包含文档中第一个表单的 FormData。

【讨论】：

好吧，这行得通！但这会产生另一个问题。所以现在模型中的“产品”对象为空，但图像通过了。有什么想法吗？

我在您的 FormData 中看不到“产品”数据。 “产品”应该从哪里来？

它在视图的模型中。这是在页面顶部@model AirmotionEcommerceWebsite.Models.Admin.AddWebProductModel

是的，但它应该从哪里获得价值呢？ （默认为null）。您可能应该将 vale 添加到 FormData 或其他方式。

它不在屏幕上。它是一种包含大量条目的正常形式。我会用代码更新问题。