В этом проекте у меня есть форма ввода и загрузки файла, ajax-вызов использует объект FormData для отправки его на определенный URL-адрес API.
Когда я отправляю данные без загрузки файла, все работает нормально (успех).
Когда я отправляю форму с загружаемым файлом, она иногда возвращает неподдерживаемый тип мультимедиа или вызывает веб-API с объектом Null, я пробовал много кода в Интернете, но это не сработало. Заранее спасибо, вот мой код.
HTML
<form id="myForm" enctype="multipart/form-data">
<div class="form-group">
<label for="inputEmail4">Title</label>
<input type="text" class="form-control required" name="Title" id="Title" placeholder="Title">
<span id="TitleSpan" class="d-none text-danger">This field is required</span>
</div>
<div class="form-group">
<label for="inputAddress">Description</label>
<textarea type="text" class="form-control required" name="Description" id="Description" placeholder="Description..." maxlength="500" rows="5"></textarea>
<span id="chars">500</span> characters remaining
<span id="DescriptionSpan" class="d-none text-danger">This field is required</span>
</div>
<div class="form-group">
<label for="inputState">Priority</label>
<select id="Priority" name="Priority" class="form-control">
<option selected>Low</option>
<option>Medium</option>
<option>High</option>
</select>
</div>
<div class="form-row">
<div class="form-group col-md-4">
<label for="City">City</label>
<select id="City" name="City" class="form-control">
<option value="Cairo" selected>Cairo</option>
<option value="Giza">Giza</option>
</select>
</div>
<img style="display:none;" src="~/Content/load.gif" id="loadingImg" />
<div class="form-group col-md-4">
<label for="Region">Region</label>
<input type="text" class="form-control required" name="Region" id="Region" placeholder="Region">
<span id="RegionSpan" class="d-none text-danger">This field is required</span>
</div>
</div>
<div class="form-group col-md-8">
<label for="exampleFormControlFile1">Upload Images</label>
<input type="file" class="form-control-file" value="Browse" id="PhotoPath" name="PhotoPath" accept=".png,.jpg,.jpeg" multiple>
</div>
</form>
мой JS
$(document).ready(function () {
$('#btnAdd').on('click', function (e) {
CreatePostIssuejs();
}
});
function CreatePostIssuejs() {
console.log("Calling");
console.log("i'm tracking you");
debugger;
var files = $("#PhotoPath").get(0).files;
var formData = new FormData();
for (var i = 0; i < files.length; i++) {
formData.append("fileInput", files[i]);
}
formData.append('Title', $("#Title").val());
formData.append('Description', $('#Description').val());
formData.append('Priority', $('#Priority').val());
formData.append('City', $('#City').val());
formData.append('Region', $('#Region').val());
var fileData = formData;
$.ajax({
url: 'api/Poset/CreatePostIssue',
data: fileData,
type: "POST",
cache: false,
contentType: false, // Not to set any content header
processData: false, // Not to process data
traditional: true,
success: function (result, status, xhr) {
debugger;
alert(result);
$('#myModal').modal('hide');
$('#modalsuc').modal('show');
},
error: function (xhr, status, error) {
debugger;
alert(status);
$('#modalwar').modal('show');
}
});
}
веб-API
[Route("api/Poset/CreatePostIssue")]
[HttpPost]
public IHttpActionResult CreatePostIssue([FromBody]PostIssueDTO postissueDTO)
{
if (ModelState.IsValid)
{
try
{
string fname = null;
var userid = User.Identity.GetUserId();
var httpRequest = HttpContext.Current.Request;
if (httpRequest.Files.Count > 0)
{
var docfiles = new List<string>();
foreach (string file in httpRequest.Files)
{
var postedFile = httpRequest.Files[file];
fname = userid + postedFile.FileName;
var filePath = HttpContext.Current.Server.MapPath("~/Images/" + fname);
postedFile.SaveAs(filePath);
docfiles.Add(filePath);
}
}
else
{ }
Post post = new Post();
post.PostType = "PostIssue";
post.AddedTime = DateTime.Now;
post.Title = postissueDTO.Title;
post.Description = postissueDTO.Description;
post.Priority = postissueDTO.Priority;
post.City = postissueDTO.City;
post.Region = postissueDTO.Region;
post.PhotoUrl = fname;
post.UserId = User.Identity.GetUserId();
_db.Posts.Add(post);
_db.SaveChanges();
return Json("success");
}
catch (Exception ex)
{
return Json("somethimg went wrong" + ex);
}
}
else
{
return Json("Model State wrong");
}
}
модель dto
public class PostIssueDTO
{
public int Id { get; set; }
public string PostType { get; set; }
public DateTime AddedTime { get; set; }
public string Title { get; set; }
public string Description { get; set; }
public string Priority { get; set; }
public string City { get; set; }
public string Region { get; set; }
public HttpPostedFileBase PhotoPath { get; set; }
public DateTime? UpdatedOn { get; set; }
public bool IsPinned { get; set; }
public bool IsDelected { get; set; }
}
Я ожидал, что это работает, как я видел онлайн.