我正在尝试构建一个带有一些文本框输入和一个文件输入的表单，供某人上传图像。
选择文件后，我有一些JS可以获取部分视图并将其呈现为表单。呈现新的部分后，我将克隆并复制文件输入元素，并将其作为隐藏输入放置在新的部分中，以供稍后在表单中使用。局部图片中还有其他与所选图像相关的字段。
完成所有操作后，将重置文件输入元素，并且用户可以选择其他图像，生成新的局部视图等。
该表单看起来好像正确呈现了，但是当我尝试提交时，VS内存/ cpu使用率激增，并且该请求从未发送给控制器。感谢您的任何建议或帮助！
ViewModel：
public class ProjectCreate
{
public int Id { get; set; }
public string Title { get; set; }
public string Description { get; set; }
public DateTime ProjectDate { get; set; }
public List<Image> GalleryImages { get; set; }
}
图片ViewModel：
public class Image
{
public int Id { get; set; }
public int GalleryIndex { get; set; }
public string Name { get; set; }
public string Description { get; set; }
public IFormFile ImageFile { get; set; }
}
表格：
<form asp-action="Create" enctype="multipart/form-data">
<div asp-validation-summary="ModelOnly" class="text-danger"></div>
<div class="form-group col-sm-4">
<label asp-for="Title" class="control-label"></label>
<input asp-for="Title" class="form-control" />
<span asp-validation-for="Title" class="text-danger"></span>
</div>
<div class="form-group col-sm-4">
<label asp-for="Description" class="control-label"></label>
<input asp-for="Description" class="form-control" />
<span asp-validation-for="Description" class="text-danger"></span>
</div>
<div class="form-group col-sm-4">
<label asp-for="ProjectDate" class="control-label"></label>
<input asp-for="ProjectDate" class="form-control" />
<span asp-validation-for="ProjectDate" class="text-danger"></span>
</div>
<div class="form-group col-sm-4">
<label class="control-label">Project Images</label>
<input id="ImageUpload" type="file" class="form-control" accept="image/jpeg, image/png, image/gif" />
</div>
@* Display images here *@
<div id="pending-images" class="row"></div>
<div class="form-group">
<input type="submit" value="Create" class="btn btn-primary" />
</div>
</form>
“ pending-images” div是渲染部分视图的地方。
PartialView：
<div class="card mb-3" style="width: 18rem">
<img class="card-img-top" id="pending-image-@Model.Id" src="" style="max-height: 18rem; max-width: 18rem;" />
<div class="card-body">
<div class="form-group">
<label class="control-label">Index</label>
<input id="GalleryImages[@Model.Id].GalleryIndex" name="GalleryImages[@Model.Id].GalleryIndex" class="form-control" value="@Model.Id" />
</div>
<div class="form-group">
<label class="control-label">Name/Title</label>
<input id="GalleryImages[@Model.Id].Name" name="GalleryImages[@Model.Id].Name" class="form-control" />
</div>
<div class="form-group">
<label class="control-label">Description</label>
<input id="GalleryImages[@Model.Id].Description" name="GalleryImages[@Model.Id].Description" class="form-control" />
</div>
<input type="file" id="GalleryImages[@Model.Id].ImageFile" name="GalleryImages[@Model.Id].ImageFile" style="display: none;" />
</div>
</div>
渲染的HTML：
<form enctype="multipart/form-data" action="/Projects/Create" method="post" novalidate="novalidate">
<div class="form-group col-sm-4">
<label class="control-label" for="Title">Title</label>
<input class="form-control valid" type="text" id="Title" name="Title" value="" aria-invalid="false">
<span class="text-danger field-validation-valid" data-valmsg-for="Title" data-valmsg-replace="true"></span>
</div>
<div class="form-group col-sm-4">
<label class="control-label" for="Description">Description</label>
<input class="form-control valid" type="text" id="Description" name="Description" value="" aria-invalid="false">
<span class="text-danger field-validation-valid" data-valmsg-for="Description"
data-valmsg-replace="true"></span>
</div>
<div class="form-group col-sm-4">
<label class="control-label" for="ProjectDate">Project Date</label>
<input class="form-control valid" type="date" data-val="true"
data-val-required="The Project Date field is required." id="ProjectDate" name="ProjectDate" value=""
aria-describedby="ProjectDate-error" aria-invalid="false">
<span class="text-danger field-validation-valid" data-valmsg-for="ProjectDate"
data-valmsg-replace="true"></span>
</div>
<div class="form-group col-sm-4">
<label class="control-label">Project Images</label>
<input id="ImageUpload" type="file" class="form-control" accept="image/jpeg, image/png, image/gif">
</div>
<div id="pending-images" class="row">
<div class="col-sm-4">
<div class="card mb-3" style="width: 18rem">
<img class="card-img-top" id="pending-image-0" src="data:image/jpeg;base64,xxx"
style="max-height: 18rem; max-width: 18rem;">
<div class="card-body">
<div class="form-group">
<label class="control-label">Index</label>
<input id="GalleryImages[0].GalleryIndex" name="GalleryImages[0].GalleryIndex"
class="form-control" value="0">
</div>
<div class="form-group">
<label class="control-label">Name/Title</label>
<input id="GalleryImages[0].Name" name="GalleryImages[0].Name" class="form-control">
</div>
<div class="form-group">
<label class="control-label">Description</label>
<input id="GalleryImages[0].Description" name="GalleryImages[0].Description"
class="form-control">
</div>
<input id="GalleryImages[0].ImageFile" type="file" class="form-control"
accept="image/jpeg, image/png, image/gif" name="GalleryImages[0].ImageFile"
style="display:none;">
</div>
</div>
</div>
</div>
<div class="form-group">
<input type="submit" value="Create" class="btn btn-primary">
</div>
<input name="__RequestVerificationToken" type="hidden" value="xxx">
</form>
当要上传的图片不止一个时，Fiddler信息中只会显示第一张图片。如果有帮助，我也可以上传该文件或其他任何文件。我尝试包括所有内容。有没有更好的方法可以做到这一点？我正在考虑如果无法解决此问题，请尝试加入imgur或类似内容。
答案 0 :(得分：0)
您应该像这样使用输入内容：
<input type="file" multiple="multiple" name="files" id="files" />
我不知道您是否可以在此处使用type =“ image”，但是您当然可以使用控件来检查用户是否仅上传了图像。
或者您可以将此参数添加到输入中。
accept="image/png, image/jpeg"