web前端-关于使用input实现一个正常的上传/删除文件

问：为什么写这篇文章？

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

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

• 点击上传，上传文件A成功后，再次点击上传按钮，此时如果没有再次选择文件，点击取消，则上次上传的A文件还在。
• 顺便增加了删除按钮

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

//fileA.tsx 
<label>upload</label>
<Spin> spinning = {isShowLoading} delay={500}>
   <div className='myUploadUI'>
       <a href="javascript:;" className ="chooseFile" >
          <Icon type="upload" />
           选文件
           <input type="file"  name="file" id="myChooseFile" onChange={handleUpload} />
       </a>
      
        <label className="myText">{myUploadName}
           <a href="javascript:;"  hidden={isDeleteIconHidden} onClick={deleteIconOnClick}>
               <Icon type="delete" />
           </a>
       </label>
    </div>
</Spin>


//相应的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;
      // *** ️注意细节： 设置<input>的value值为空，就将<input>内部选择的文件设置为空了
       selectedFile.value = '';

     //其他  改变数据，驱动渲染界面
      this.setDate({
            myUploadName:'';   //删除后，当前文件值是空。
           isDeleteIconHidden:true;////删除后，当前不显示删除按钮
         })
  }
}