【Html】清空Input file数据

不能采用 document.getElementById('testFile')，这样获取不了file的value值

 

需要通过对象的形式获取和设置value值

 

方法一：change事件中传入当前触发事件event

<input id="testFile" value="123" type="file" (change)="testChanger($event)">

 

event.target.value=""

 

注意：一般在ts中使用这种方式，并且还是在对应的方法下进行value设置，在ts中如果跳出对应的方法就会报异常

 

方法二：change事件传入input标签（this）

<input id="testFile" value="123" type="file" (change)="testChanger(this)">

 

testChanger(obj){

obj.value=""

}

注意：此方法只能再js或者jquery中使用，在ts中不能使用

 

方法三：利用outerHTML进行替换标签

let e1=document.getElementById('testFile')

e1.outerHTML=e1.outerHTML.replace(/(value=\").+\"/i,"$1\"")//此处采用正则表达式

el.outerHTML="<input _ngcontent-c2class=\"ng-tns-c2-0\" id=\"testFile\" type=\"file\">"//或者是直接些标签

 

注意：这种方法不适合在ts中使用，因为方法不会再进行跳转，即change事件会丢失

方法四：利用getElementsByTagName获取标签，使用value值

let e3 =document.getElementsByTagName('input')[0];//自己估计input位置（如果没有动态生成或移除input标签，一般位置都会固定的）

e3.value=""//使用getElementsByTagName获取的标签对象，可以直接获取或设置value值