Js/Jquery獲取input file的文件名

原文鏈接：https://blog.csdn.net/WuLex

<input type="file" name="file" id="file" class="input_text80" />

方法一：字符串截取

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

方法二：正則表達式

var file = $("#file").val();
var strFileName = file.replace(/^.+?\\([^\\]+?)(\.[^\.\\]*?)?$/gi, "$1"); //正則表達式獲取文件名，不帶後綴
var FileExt = file.replace(/.+\./, ""); //正則表達式獲取後綴
//帶文件後綴名  獲取文件名稱
var pos1 = path.lastIndexOf('/');
var pos2 = path.lastIndexOf('\\');
var pos = Math.max(pos1, pos2);

if (pos < 0) {
    return path;
}

else {
    return path.substring(pos + 1);
}
}

$(document).ready(function() {

    $('#file').change(function() {

        var str = $(this).val();

        var fileName = getFileName(str);

        var fileExt = str.substring(str.lastIndexOf('.') + 1);

        alert(fileName + "\r\n" + fileExt);

    });

});

jquery即時獲取上傳文件input file文件名

截圖：


代碼：

<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的值設置爲空字符串就可以了

<input type="file" id="excel" onchange="loadFile(this.files[0])" >

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