Cíl: přeji si, aby post obraz z pohledu regulátoru pomocí modelu.
Problém: Při přidání dat formuláře ajax metoda, to říká,
"Uncaught TypeError: Nepodařilo se vytvořit 'FormData': parametr 1 je ne typu 'HTMLFormElement'."
Co jsem zkusil: já jsem udělal nějaké googling a snažil HttpPostedFileWrapper jako typ dat v modelu, a to říká, že to neexistuje. Také jsem se snažil, co chyba říká, že by to mělo být, ale že také neexistuje.
Jsem pomocí Rámce 5 Asp.net základní MVC
Model:
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) {
}
});
};
Chyba:
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
Plné ProductAdd Zobrazení:
@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>
}