如何獲取<input type="file">上傳的檔名稱

antzone發表於2017-03-15

使用文字域可以選中要上傳的檔案，並且顯示出來檔案的絕對路徑，但是實際應用中，我們需要的往往只是檔案的名稱，下面通過程式碼例項簡單介紹一下如何實現此效果，程式碼例項如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<script type="text/javascript"> 
function getFileName(path){ 
  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); 
  }
}
window.onload=function(){
  var thefile=document.getElementById('thefile');
  thefile.onchange=function(){
    alert(getFileName(this.value));
  }
}
</script> 
</head>
<body> 
<input type=file id="thefile"/> 
</body> 
</html>

以上程式碼實現了我們的要求，當選中檔案的時候，能夠彈出檔案的名稱。

相關文章