[英]ajax send file to mvc api c# :Uncaught TypeError: Illegal invocation
I am uploading files to my web APi (in c#, ASP. NET) using ajax and a html file selector. 我正在使用ajax和html文件选择器将文件上传到我的Web APi(在c#中,ASP.NET)。 I have a viewmodel and I want to pass the file to my controller, using my viewmodel. 我有一个视图模型,我想使用我的视图模型将文件传递给我的控制器。
This is my code: My viewmodel 这是我的代码:我的视图模型
public class CursoViewModel
{
public Guid CursoId { get; set; }
[MaxLength(125)]
public string Titulo { get; set; }
public string Descripcion { get; set; }
[Required(ErrorMessage ="select image file for course")]
[DataType(DataType.Upload)]
public HttpPostedFileBase Imagen { get; set; } //note this is the image
}
My view, 我的观点,
<form id="Editcurso" method="post" action="#" enctype="multipart/form-data">
@Html.AntiForgeryToken()
@Html.ValidationSummary(true, "Please fix the following errors.")
<div class="container">
<div class="form-group">
@Html.LabelFor(c=>c.Titulo)
@Html.TextBoxFor(c => c.Titulo, new { @class="form-control"})
@Html.ValidationMessageFor(m => m.Titulo)
</div>
<div class="form-group">
@Html.LabelFor(c => c.Descripcion)
@Html.TextAreaFor(c => c.Descripcion, new { @class = "form-control" })
@Html.ValidationMessageFor(m => m.Descripcion)
</div>
<div class="form-group">
@Html.LabelFor(m => m.Imagen)
@Html.TextBoxFor(m => m.Imagen, new {type = "file"})
@Html.ValidationMessageFor(m => m.Imagen)
</div>
<button id="submiter" type="submit" class="btn btn-primary">Listo!</button>
</div>
My javascript: 我的JavaScript:
$('#Editcurso').submit(function(e) {
e.preventDefault(); // prevent the default submit
if (!$(this).valid()) {
return; // exit the function and display the errors
}
jQuery.support.cors = true;
var data = new FormData();
var files = $("#Imagen").get(0).files;
// Add the uploaded image content to the form data collection
if (files.length > 0) {
data.append("UploadedImage", files[0]);
console.log("files uploaded");
}
var viewmodel = new Object();
viewmodel.Titulo = "Sourav";
viewmodel.Descripcion = "Kayal";
viewmodel.CursoId = "some guid";
viewmodel.Imagen = files; /*<<==I pass the file here*/
$.ajax({
url: '/api/ProfesorCurso/test',
type: 'PUT',
dataType: 'json',
data: viewmodel,
success: function (data) {
console.log(data);
return false;
},
error: function (x, y, z) {
alert('error al postear');
return false;
}
});
e.preventDefault(); // avoid to execute the actual submit of the form.
});
My api 我的api
[HttpPut]
public IHttpActionResult UpdateCursoProfesor([FromBody] CursoViewModel viewmodel)
{
if (!ModelState.IsValid) return BadRequest();
try
{
//do something, upload the file inside the viewmodel
return Ok(result);
}
catch (DbEntityValidationException e)
{ //do something}
When I execute my program, I get this error message: "Uncaught TypeError: Illegal invocation". 当我执行程序时,出现以下错误消息:“未捕获的TypeError:非法调用”。 What am I doing wrong? 我究竟做错了什么? thanks 谢谢
When calling the $.ajax
method to send files via FormData
, you need to specify processData
and contentType
property values to false. 调用$.ajax
方法通过FormData
发送文件时,需要将processData
和contentType
属性值指定为false。
var url ='/api/ProfesorCurso/test';
$.ajax({
url: url,
type: 'PUT',
data: viewmodel,
processData: false,
contentType: false,
success: function (data) {
console.log(data);
return false;
},
error: function (x, y, z) {
alert('error al postear');
return false;
}
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.