记录一个有效的清空input type=file上传已选文件的最优方法

<label id="uploadbtn">
    <input type="file" id="fileupload" style="display: none"/>
</label>

此处安利一个漏洞，用lable标签包裹input，点击label就能触发input的change事件，实际业务中非常实用。

方法封装

function clearFileInput(file){ 
    var form = document.createElement('form'); 
    document.body.appendChild(form); 
    var pos = file.nextSibling; 
    form.appendChild(file); 
    form.reset(); 
    pos.parentNode.insertBefore(file, pos); 
    document.body.removeChild(form); 
} 

用法

$('#fileupload').on('change', function(){
    var file = this.files[0];
    if(file.name.indexof('.xls') === -1){
        //文件格式友情提示
        //change事件触发后根据业务情况选择清空已选，方便相同文件二次上传
        clearFileInput($('#fileupload')[0]);
        return
    }
    
    //继续接口上传相关业务……
    
})