[英]Typescript file upload validation
我正在尝试上传文件,但以下代码出现错误。 错误是属性在HTML Element类型上不存在 。 如何解决呢?
我已针对以下代码行注释了该错误。
component.html
<input type="file" name="fileToUpload" id="fileToUpload" onchange="fileSelected();"/>
<ul>
<label>Select a Module Name</label>
<select id = "ModuleDropDown">
<option value="">Select</option>
<option value="Recuirtmnet">Recuirtmnet</option>
<option value="Talent" selected="selected">Talent</option>
<option value="Attrition">Attrition</option>
<option value="Performance">Performance</option>
<option value="Survey">Survey</option>
</select>
</ul>
<div id="fileName"></div>
<div id="fileSize"></div>
<div id="fileType"></div>
component.ts
fileSelected() {
//Property 'files' does not exist on type 'HTMLElement'
let file = document.getElementById('fileToUpload').files[0];
if (file) {
let fileSize = 0;
if (file.size > 1024 * 1024)
this.fileSize = (Math.round(file.size * 100 / (1024 * 1024)) / 100).toString() + 'MB';
else
this.fileSize = (Math.round(file.size * 100 / 1024) / 100).toString() + 'KB';
document.getElementById('fileName').innerHTML = 'Name: ' + file.name;
document.getElementById('fileSize').innerHTML = 'Size: ' + fileSize;
document.getElementById('fileType').innerHTML = 'Type: ' + file.type;
let dropDown = document.getElementById("ModuleDropDown");
//Property 'options' does not exist on type 'HTMLElement'.
//Property 'selectedIndex' does not exist on type 'HTMLElement'
let dpVal = dropDown.options[dropDown.selectedIndex].value;
let init_params = {};
this.init_params.action = 'prepare';
this.init_params.file_name = file.name;
this.init_params.file_size = fileSize;
this.init_params.moduleName = dpVal;
ws.send(JSON.stringify(init_params))
console.log("sending init params.....")
}
}
您的代码有很多问题。 您使用的是Vanilla JavaScript,而不是利用Angular语法。
可以使用(change)
跟踪文件输入上的(change)
,并将$event
对象传递给更改处理程序。
您可以使用[(ngModel)]
从下拉列表中获取所选选项的值。
建议不要使用document
来访问DOM并对其进行更改或向其中显示数据。 您应该改用字符串插值语法( {{}}
)。
这是供您参考的示例StackBlitz 。
选择一个选项,然后上载文件以在UI上查看“选定文件详细信息”,并在控制台上看到“选定下拉菜单”。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.