ASP.net核心MVC框架5Formdata在附加影像時不是正確的型別

目標：我希望使用模型將影像從視圖發布到控制器。

問題：將表單資料添加到 ajax 方法時，它說，

“未捕獲的型別錯誤：無法構造‘FormData’：引數 1 的型別不是‘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

完整產品添加視圖：

@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 >
            <h5>Thumbnail Image</h5>

            <div >

                <input type="file" id="Thumbnailbrowse">
                <div id="imgPreview"  style="display:none">
                    <img  id="targetImg" />
                    <div >
                        <a href="#" onclick="ClearPreview()"><i ></i></a>
                        <span id="description"></span>
                    </div>
                </div>


            </div>
        </div>

        <div >
            <h5>Images</h5>
            <div >

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


            </div>
        </div>

        <div >
            <h5>Is Product Active?</h5>
            <div >
                <div >
                    @Html.EditorFor(model => model.product.BlnIsActive)
                    @Html.ValidationMessageFor(model => model.product.BlnIsActive, "", new { @class = "text-danger" })
                </div>
            </div>
        </div>

        <div >
            <h5>Featured Item</h5>
            <div >
                <div >
                    @Html.EditorFor(model => model.product.BlnIsFeatured)
                    @Html.ValidationMessageFor(model => model.product.BlnIsFeatured, "", new { @class = "text-danger" })
                </div>
            </div>
        </div>

        <div >
            @{
                List<SelectListItem> dataItems = ViewBag.InventoryItemList;
            }
            <div >
                <h5>Inventory System Item</h5>
                <div >
                    @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 >
            <h5>MSRP</h5>
            <div >
                @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 >
            <h5>Description</h5>
            <div >
                @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 >
            <h5>Specs</h5>
            <table >
                <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 >
            <div >
                <input type="submit" name="Submit"  onclick="UploadForm()" />
            </div>
        </div>
    </div>
}

uj5u.com熱心網友回復：

您可以將 (HttpPostedFileWrapper) 替換為 (IFormFile) 我認為這會起作用！

uj5u.com熱心網友回復：

您正在使用：

var data = new FormData(this);

這里this應該是一個表單元素。

試試這個：

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

現在data將包含檔案中第一個表單的 FormData。

標籤：javascript 网站 阿贾克斯 asp.net-mvc asp.net核心

上一篇：XMLHttpRequest操作JSON檔案

下一篇：如何通過Ajax呼叫更新資料表