.NET Core MVC 中文件输入的远程验证
Remote validation on file input in .NET Core MVC
我已经对文本 属性 实施了远程验证,没有问题,并且远程验证正确触发,但是我还试图在提交表单之前添加对图像上传的验证。理想情况下,我希望在选择本地文件后远程验证文件。有什么办法可以使它正常工作吗?我看不到什么事件实际触发了远程验证,但我猜它不是在文件的输入元素中触发的。
有什么建议么?谢谢
已尝试以下方法:
视图模型:
[Remote(action: "ValidatePhoto", controller: "Photos", ErrorMessage = "Photo width and height must be at least 300 pixels")]
public IFormFile Photo { get; set; }
照片控制器:
public IActionResult ValidatePhoto(IFormFile Photo)
{
if (Validation.MeetsMinimumImageDimensions(Photo))
{
return Json(true);
}
return Json(false);
}
查看:
<input id="photoUpload" asp-for="Photo" type="file" accept="image/*" name="Photo" style="display:none" />
<span id="submitError" asp-validation-for="Photo" class="text-danger"></span>
对于内置的Remote
验证,它将Get
或Post
方法发送带有字段内容的请求。它不会提交带有表单数据的文件对象。
尝试实现您自己的 ajax 对后端方法的请求。如下所示:
@section Scripts {
@{await Html.RenderPartialAsync("_ValidationScriptsPartial");}
<script type="text/javascript">
$(document).ready(function () {
document.querySelector("form input[type=file]").onchange = function (event) {
var path = $(this).attr("data-val-remote-url");
var field = $(this).attr("id");
var errormsg = $(this).attr("data-val-remote");
var formdata = new FormData();
var file = document.getElementById(field).files[0];
formdata.append(field, file)
$.ajax({
url: path,
type: 'POST',
data: formdata,
processData: false,
contentType: false,
success: function (data) {
if (data == false) {
var msg = $("[data-valmsg-for=" + field + "]").first();
msg.html(errormsg)
}
}
});
return false;
};
});
</script>
}
使用此方法,它将向操作发送两个请求,使用 Get 方法进行内置验证,并使用 Post 方法进行自定义请求,请尝试更改您的验证方法,例如
public IActionResult ValidatePhoto(IFormFile Photo)
{
if (Request.Method == HttpMethods.Get)
{
return Json(true);
}
if (Validation.MeetsMinimumImageDimensions(Photo))
{
return Json(true);
}
return Json(false);
}
我已经对文本 属性 实施了远程验证,没有问题,并且远程验证正确触发,但是我还试图在提交表单之前添加对图像上传的验证。理想情况下,我希望在选择本地文件后远程验证文件。有什么办法可以使它正常工作吗?我看不到什么事件实际触发了远程验证,但我猜它不是在文件的输入元素中触发的。 有什么建议么?谢谢
已尝试以下方法:
视图模型:
[Remote(action: "ValidatePhoto", controller: "Photos", ErrorMessage = "Photo width and height must be at least 300 pixels")]
public IFormFile Photo { get; set; }
照片控制器:
public IActionResult ValidatePhoto(IFormFile Photo)
{
if (Validation.MeetsMinimumImageDimensions(Photo))
{
return Json(true);
}
return Json(false);
}
查看:
<input id="photoUpload" asp-for="Photo" type="file" accept="image/*" name="Photo" style="display:none" />
<span id="submitError" asp-validation-for="Photo" class="text-danger"></span>
对于内置的Remote
验证,它将Get
或Post
方法发送带有字段内容的请求。它不会提交带有表单数据的文件对象。
尝试实现您自己的 ajax 对后端方法的请求。如下所示:
@section Scripts {
@{await Html.RenderPartialAsync("_ValidationScriptsPartial");}
<script type="text/javascript">
$(document).ready(function () {
document.querySelector("form input[type=file]").onchange = function (event) {
var path = $(this).attr("data-val-remote-url");
var field = $(this).attr("id");
var errormsg = $(this).attr("data-val-remote");
var formdata = new FormData();
var file = document.getElementById(field).files[0];
formdata.append(field, file)
$.ajax({
url: path,
type: 'POST',
data: formdata,
processData: false,
contentType: false,
success: function (data) {
if (data == false) {
var msg = $("[data-valmsg-for=" + field + "]").first();
msg.html(errormsg)
}
}
});
return false;
};
});
</script>
}
使用此方法,它将向操作发送两个请求,使用 Get 方法进行内置验证,并使用 Post 方法进行自定义请求,请尝试更改您的验证方法,例如
public IActionResult ValidatePhoto(IFormFile Photo)
{
if (Request.Method == HttpMethods.Get)
{
return Json(true);
}
if (Validation.MeetsMinimumImageDimensions(Photo))
{
return Json(true);
}
return Json(false);
}