input type="file"相同文件只能触发一次onChange

·  阅读 727
input type="file"相同文件只能触发一次onChange

自定义实现图片上传组件,主要是跟着MDN官方文档实现。onChange事件在第二次上传同样的文件时不会触发。React环境 + 单个图片上传

发现问题:

当上传不同的图片时,事件触发正常,但是上传刚刚上传过的图片,事件不触发。

分析问题:

onChange事件的触发标准是value值发生变化。所以每次操作完需要将value值清空。

解决问题:

 fileRef.current.value = "";
 // 如果是原生实现,则是 document.getElementById("image_uploads").value = "";
复制代码

PS: 网上同类原生实现的解决方案replaceWith👎

document.getElementById("image_uploads").replaceWith(<input type="file" />)
复制代码

其原理本质上是将原来的DOM组件换成一个新的,没必要。

1. 替换的时候还有方法

2. React中该方案鸡肋

完整实现代码:

html代码

      <div className="image_upload_container">        
        <label id="upload_button" htmlFor="image_uploads">          
         <i className="iconfont icon-a-danchuang-shangchuantupian"></i>          
         <span>上传</span>         
         <input ref={fileRef} onChange={uploadFile} accept={fileType || ".jpg, .gif, .png"} type="file" id="image_uploads" />        
        </label>       
        <div className="preview" ref={previewRef}>       
        </div>      
       </div>
复制代码

对应方法:

 const uploadFile = (e) => {   
   removeAllPreview();    // 绘制蒙层+删除;    
   const mask = document.createElement("div");    
   mask.className = "mask";    
   const icon = document.createElement("i");    
   icon.className = "iconfont icon-biaoge-shanchu";    
   icon.addEventListener("click", () => {      
     e.stopPropagation();      
     removeAllPreview();      
     if (fileRef.current) {        
      fileRef.current.value = "";      
     }    
    });   
    mask.appendChild(icon);    // // 绘制图片;    
    const curFile = fileRef.current && fileRef.current.files;    
    const image = document.createElement("img");    
    image.src = URL.createObjectURL(curFile[0]);    
    previewRef.current.appendChild(image);    
    previewRef.current.appendChild(mask);    
    if (curFile[0] && curFile[0].size > maxSize) {      
      sizeRef.current.innerHTML = "图片尺寸不能超过" + (maxSize/(1024*1024)).toFixed(3) + "M";    
    }    // 将文件值传递给外界    
    handleFile(curFile[0]);  
  };
复制代码
分类:
前端
标签:
分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改