我使用的表單包含一些輸入和一個檔案選擇。我正在嘗試使用 jQuery Ajax 上傳檔案和表單資訊。我使用以下操作將資料插入資料庫：
public async Task<IActionResult> UploadPm(IFormFile file, AdminViewModel adminModel)
{
if (!ModelState.IsValid)
{
return BadRequest("Enter Required Fields");
}
var fileName = Path.GetFileName(file.FileName);
var fileExtension = Path.GetExtension(fileName);
var newFileName = string.Concat(Convert.ToString(Guid.NewGuid()), fileExtension);
var path = Path.Combine(Directory.GetCurrentDirectory(), "wwwroot/PmFiles/UploadedByAdmin", newFileName);
using (var stream = new FileStream(path, FileMode.Create))
{
await file.CopyToAsync(stream);
}
int CurrentUserId = Convert.ToInt32(HttpContext.Session.GetString("userId"));
var inputElements = new PM()
{
pmNumber = Convert.ToInt32(adminModel.pmNumber),
costCenter = adminModel.costCenter,
serviceType = adminModel.serviceType,
destination = adminModel.destination,
workCenter = adminModel.workCenter,
creationDate = DateTime.Now,
startDate = DateTime.Now,
endDate = DateTime.Now,
mainFileName = newFileName,
userId = CurrentUserId
};
_pmRepository.InsertPM(inputElements);
_pmRepository.Save();
return View("Index");
}
發送資料的jQuery部分如下：
<script>
$(document).ready(function () {
var formData = new FormData();
$('#submitForm').on('click', function (e) {
e.preventDefault();
$_pmNum = $('#pm-num').val();
$_costCenter = $('#cost-center').val();
$_serviceType = $('#serviceType').val();
$_destination = $('#destination').val();
$_workCenter = $('#workCenter').val();
$_startDate = $('#date-input1').val();
$_endDate = $('#date-input2').val();
formData.set(file, $('#file')[0].files[0]);
alert($_costCenter);
$.ajax({
type: "POST",
url: "/Admin/UploadPm",
contentType: true,
processData: true,
data: {
pmNumber: $_pmNum,
costCenter: $_costCenter,
serviceType: $_serviceType,
destination: $_destination,
workCenter: $_workCenter,
startDate: $_startDate,
endDate: $_endDate,
file: formData
}
});
});
});
</script>
問題是當我除錯控制器時，所有的輸入變數都是空的。在這種情況下使用的最佳方法是什么？
更新：
html部分如下：
<div class="panel-body">
<div class="row">
<form enctype="multipart/form-data" method="post">
<div class="col-lg-6 col-md-6">
<div class="form-group notification-font">
<section>
<input class="form-control numbers-only" asp-for="pmNumber" name="pmNumber" id="pm-num">
</section>
<section>
<select class="form-control" asp-for="costCenter" name="costCenter" id="cost-center">
@{
foreach (var item in ViewData["CostCenterItem"] as HashSet<string>)
{
<option>@Html.DisplayName(item)</option>
}
}
</select>
</section>
<section>
<select class="form-control" asp-for="serviceType" name="serviceType" id="serviceType">
<option>opt1</option>
<option>opt2</option>
<option>opt3</option>
<option>opt4</option>
<option>opt5</option>
<option>opt6</option>
<option>opt7</option>
<option>opt8</option>
</select>
</section>
<section>
<input class="form-control" asp-for="destination" name="destination" id="destination">
</section>
</div>
</div>
<div class="col-lg-6 col-md-6 notification-font">
<section>
<select class="form-control" asp-for="workCenter" name="workCenter" id="workCenter">
<option>opt1</option>
<option>opt2</option>
<option>op3</option>
</select>
</section>
<section>
<input class="form-control" id="date-input1" name="creationDate" asp-for="startDate">
</section>
<section>
<input class="form-control" id="date-input2" name="startDate" asp-for="endDate">
</section>
<section>
<input id="file" name="file" type="file">
</section>
</div>
</form>
</div>
<div class="row">
<button type="button" class="btn btn-success notification-font" id="submitForm">
<i class="fa fa-plus"></i>Add New PM</button>
</div>
</div>
uj5u.com熱心網友回復：
1.您混合json和form-data兩種不同的內容型別。如果您的帖子資料包含檔案，則只能通過表單資料發布。
2.你錯過了雙引號formData.set(name, value);，修改如下：
formData.set(file, $('#file')[0].files[0]);
到：
formData.set("file", $('#file')[0].files[0]);
在下面更改您的代碼：
<script>
$(document).ready(function () {
var formData = new FormData();
$('#submitForm').on('click', function (e) {
e.preventDefault();
$_pmNum = $('#pm-num').val();
formData.set("pmNumber", $_pmNum);
$_costCenter = $('#cost-center').val();
formData.set("costCenter", $_costCenter);
$_serviceType = $('#serviceType').val();
formData.set("serviceType", $_serviceType);
$_destination = $('#destination').val();
formData.set("destination", $_destination);
$_workCenter = $('#workCenter').val();
formData.set("workCenter", $_workCenter);
$_startDate = $('#date-input1').val();
formData.set("startDate", $_startDate);
$_endDate = $('#date-input2').val();
formData.set("endDate", $_endDate);
formData.set("file", $('#file')[0].files[0]);
$.ajax({
type: "POST",
url: "/Admin/UploadPm",
contentType: false, //change here...
processData: false, //change here..
data: formData
});
});
});
</script>
結果：
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/388817.html