Js/Jquery获取input file的文件名

蔚落 2021-06-26 16:06 1076阅读 0赞

**方法一：字符串截取**

var file = $("#file").val();
    var fileName = getFileName(file);
      
    function getFileName(o){ 
        var pos=o.lastIndexOf("\\");
        return o.substring(pos+1);  
    }

**方法二：正则表达式**

## `jquery`即时获取上传文件`input file`文件名 ##

截图：  
![在这里插入图片描述][20190801231755880.png]  
![在这里插入图片描述][20190801231440421.png]  
代码：

<input type="file" id="choosefile" style="display:none"/>
    <div onclick="uploadfile()" style="width:78px;height:50px;margin-left:5px;background:#00A2D4;float:left;display:block;line-height:50px;text-align:center;color:white;border-radius:3px;cursor:pointer;">选择文件</div>
    <div id="filename" style="line-height:70px"></div>
    
    <script type="text/javascript"> function uploadfile(){ $("#choosefile").click(); //jquery获取input file文件名 var file = $("#choosefile").val(); var fileName = getFileName(file); function getFileName(o){ var pos=o.lastIndexOf("\\"); return o.substring(pos+1); } $("#filename").html(fileName); } </script>

## `JQuery`清除`input file`选中的文件 ##

只需要将`input`的值设置为空字符串就可以了

$("#excel").val("");

[20190801231755880.png]: /images/20210626/fa5df4dabb4a41e58523661726ec53b8.png
[20190801231440421.png]: /images/20210626/33b81ab72cc8432c9b23ec1b87a40a26.png