房间：362 未捕获类型错误：无法读取未定义的属性'length'

Question

我正在使用ajax发布表单的数据，但是当我单击提交按钮时出现错误。 似乎 Ajax 考虑了#img1的空值。并且不会将文件输入值发送到操作。

---

检查元素中的错误消息：

Uncaught TypeError: Cannot read property 'length' of undefined
at HTMLInputElement.<anonymous> (Room:403)
at HTMLDocument.dispatch (jquery-3.3.1.min.js:2)
at HTMLDocument.y.handle (jquery-3.3.1.min.js:2)

阿贾克斯代码：

$(document).on('click', '#submitTheRoom', function (evt) {
evt.preventDefault();
var FileUpload = $("#img1").get(0);
var Files = FileUpload.Files;
var Data = new FormData();
for (var i = 0; i < Files.length; i++) {
Data.append('img1', Files[i]);
}
$('input, select').each(function (x,y) {
Data.append($(y).attr('name'), $(y).val());
});
$.ajax({
type: "post",
url: '@Url.Action("AddEditRoom", "Room", new { area = "Admin"})',
contentType: false,
processData: false,
data: Data
}).done(function (res) {
if (res.status === "success") {
alert(res.message);
} else {
alert("در ثبت اطلاعات مشکلی بوجود آمده. لطفا دوباره تلاش کنید");
}
}).fail(function (xhr, b, error) {
alert(error);
});
})

我的表格：

<form method="post" enctype="multipart/form-data">
@Html.AntiForgeryToken()
<input asp-for="Id" class="form-control hidden formInput" />
<div class="form-group myFormGroup col-lg-6  col-md-12">
<label asp-for="Name" class="col-lg-3 col-sm-3 control-label formLabel"></label>
<div class="col-lg-9 myInputContainer">
<input asp-for="Name" class="form-control formInput" />
</div>
<span asp-validation-for="Name" class="text-danger myError"></span>
</div>
<div class="form-group myFormGroup col-lg-6  col-md-12">
<label asp-for="Explanation" class="col-lg-3 col-sm-3 control-label formLabel"></label>
<div class="col-lg-9 myInputContainer">
<input asp-for="Explanation" class="form-control formInput" />
</div>
<span asp-validation-for="Explanation" class="text-danger myError"></span>
</div>
<div class="form-group myFormGroup col-lg-6  col-md-12">
<label asp-for="RoomImageOne" class="col-lg-3 col-sm-3 control-label formLabel"></label>
<div class="col-lg-9 myInputContainer">
<input id="img1" name="img1" type="file" 
class="form-control formInput" asp-for="RoomImageOne" />
</div>
<span asp-validation-for="RoomImageOne" class="text-danger myError"></span>
</div>
<div class="modal-footer">
<input type="button" id="submitTheRoom" class="btn btn-success" value="submit">
</div>
</form>

Answer 1

不是答案，我会在之后删除。

注释掉你的js并用这个进行测试：

$(document).on('click', '#submitTheRoom', function(evt) {
evt.preventDefault();
var FileUpload = $("#img1").get(0);
console.log("FileUpload: " + FileUpload);
var Files = FileUpload.files;                 // lower case f.
console.log("Files: " + Files);               // [object FileList]
console.log("Files.length: " + Files.length); // should be 0 on first load.
});

你得到同样的结果吗？不同？

将此添加到您的原始问题中，并在此处添加评论，而不是在此处。如果它没有用，我会删除它。

Answer 2

var Files = FileUpload.Files;

返回未定义。在控制台上检查 FileUpload 的值，看看 FileUpload.Files 是否返回任何内容。尝试

var Files = FileUpload.files;

相反。我怀疑大写可能是错字