用户单击文件上传对话框取消时出错

Question

我有一个这样的输入类型文件：

<div class="custom-file btn-file">
<input height="35px" type="file" class="custom-file-input" id="i_file_1" name="i_file[]" accept="application/pdf, image/jpeg, image/jpg, application/vnd.ms-excel, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet">
</div>

我处理onchange事件以模态呈现文件;但是当用户选择输入中的文件并尝试更改它但一旦在对话框中单击取消它发送错误时，我遇到了问题。

$(document).on('change', '.btn-file :file', function(evt) {
var size = this.files[0].size;
console.log(size);
});

此错误：

Uncaught TypeError: Cannot read property 'size' of undefined
at HTMLInputElement.<anonymous> (func.js?20180702235402:11)
at HTMLDocument.dispatch (jquery.min.js?20180702235402:3)
at HTMLDocument.q.handle (jquery.min.js?20180702235402:3)
(anonymous) @ func.js?20180702235402:11
dispatch @ jquery.min.js?20180702235402:3
q.handle @ jquery.min.js?20180702235402:3

$(document).on('change', '.btn-file :file', function(evt) {
var size = this.files[0].size;
console.log(size);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="custom-file btn-file">
<input height="35px" type="file" class="custom-file-input" id="i_file_1" name="i_file[]" accept="application/pdf, image/jpeg, image/jpg, application/vnd.ms-excel, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet">
</div>

Answer 1

你检查你是否有files对象。 如果是这样，则获取大小。 否则回退到 0 或类似的东西

$(document).on('change', '.btn-file :file', function(evt) {
var size = this.files[0] ? this.files[0].size : 0;
console.log(`size ${size}`);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="custom-file btn-file">
<input height="35px" type="file" class="custom-file-input" id="i_file_1" name="i_file[]" accept="application/pdf, image/jpeg, image/jpg, application/vnd.ms-excel, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet">
</div>