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

Question

目标:我希望使用模型将图像从 View 发布到 Controller 。

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

"Uncaught TypeError: Failed to construct 'FormData': parameter 1 is not of type 'HTMLFormElement'."

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

我正在使用 Framework 5 Asp.net core 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

完整产品添加 View :

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

Answer 1

你可以用(IFormFile)替换(HttpPostedFileWrapper)我认为这会起作用!