html如何清除input file,web前端-关于使用input实现一个正常的上传/删除文件

问：为什么写这篇文章？

答 使用input时候，去上传文件的时候，页面不美观，也感觉input的设计有点不合理：选择了文件，再次选择的时候，如果再次选择的是空，也就是不选择的时候，竟然会删除上次已经选择好的文件。个人感觉设计不合理(个人观点，不喜勿喷)，所以自定义了一个。

所以自定义的要实现的效果就是：

点击上传，上传文件A成功后，再次点击上传按钮，此时如果没有再次选择文件，点击取消，则上次上传的A文件还在。

顺便增加了删除按钮

-----使用的技术栈是React的txs，CSS ----

//fileA.tsx

upload

spinning = {isShowLoading} delay={500}>

选文件

{myUploadName}

//相应的css 样式

. myUploadUI {

display:flex;

flex-direction:row;

justify-content:flex-start;

margin:10px;

}

. myUploadUI . myText{

text-align:left;

line-height:20px;

padding:4px 12px;

border:1px solid red;

border-radius:5px;

width:100%;

//自己最为容器：

display：flex；

justify-content:space-between;

}

. chooseFile {

position:relation;

display:inline-block;

flex-grow:0;

flex-shrink:0;

line-height:20px;

padding:4px 12px;

border:1px solid red;

border-radius:5px;

text-decoration:none;

}

. chooseFile input {

position:absolute;

top:0;

right:0;

opacity:0;

}

. chooseFile ::hover {

border:1px solid blue;

text-decoration:none;

}

接下来就是相应的点击事件

//点击选择文件，进行文件上传

//此事件是input 的onChange事件：触发机制是 input的值发生了改变，所以两种情况下会触发：1>点击input，弹框，选择了文件之后出发 2>选择了”取消“触发

// 而 input 的onClick，则是一点击 input，弹框，就会触发onClick事件。与本案的业务不符

function handleUpload(event:any){

//取值方式1:

var fileList = event.target.files;

if(fileList.length > 0){

let myFile = fileList[0];

console.log(`fileName is：${myFile.name}; filePath is: ${myFile.path}`);

//input 有值，说明选择了文件，修改相关的业务：修改数据，触发渲染界面

this.setDate({

isShowLoading:true

})

//进行其他业务逻辑，如上传到后台的网络请求 xxxx

//请求成功后，关闭loading，即 isShowLoading设置为false，给myUploadName 设置为 myFile.name的值，等等。。。。

}

/**

取值方式2:

var selectedFile = document.getElementById('myChooseFile') as HTMLInputElement;

let fileList = selectedFile.files;

let myFile = fileList![0]; //强制解包

console.log(`fileName is：${myFile.name}; filePath is: ${myFile.path}`);

xxxxx

*/

}

//上传好文件后，选择删除文件的事件

function deleteIconOnClick() {

//或者使用 antd的Modal. confirm 弹框提示判断也可以。

if(confirm(`删除${myUploadName}?`) === true){

//主思路：删除

var selectedFile = document.getElementById('myChooseFile') as HTMLInputElement;

// *** ️注意细节： 设置的value值为空，就将内部选择的文件设置为空了

selectedFile.value = '';

//其他 改变数据，驱动渲染界面

this.setDate({

myUploadName:''; //删除后，当前文件值是空。

isDeleteIconHidden:true;删除后，当前不显示删除按钮

})

}

}