web-dev-qa-db-ja.com

Javascript-ファイル入力コントロールからファイル名を抽出する方法

ユーザーがWebページでファイルを選択すると、ファイル名だけを抽出できるようになります。

Str.search関数を試しましたが、ファイル名がc：\ uploads\ilike.this.file.jpgのような場合、失敗するようです。

拡張子なしでファイル名だけを抽出するにはどうすればよいですか？

javascriptbrowserextract
105
Yogi Yang 007

<input type = "file">のIDがploadであると仮定すると、うまくいけばトリックを実行できるはずです。

var fullPath = document.getElementById('upload').value;
if (fullPath) {
    var startIndex = (fullPath.indexOf('\\') >= 0 ? fullPath.lastIndexOf('\\') : fullPath.lastIndexOf('/'));
    var filename = fullPath.substring(startIndex);
    if (filename.indexOf('\\') === 0 || filename.indexOf('/') === 0) {
        filename = filename.substring(1);
    }
    alert(filename);
}
114
Ian Oxley

文字列（{filepath}/{filename}）を分割してファイル名を取得するには、次のようなものを使用できます。

str.split(/(\\|\/)/g).pop()

「popメソッドは、配列から最後の要素を削除し、その値を呼び出し元に返します。」 MOZILLA DEVELOPER NETWORK

例：

from："/home/user/file.txt".split(/(\\|\/)/g).pop()

取得："file.txt"

174
VallaDanger

最近ではもっと簡単な方法があります：

var fileInput = document.getElementById('upload');   
var filename = fileInput.files[0].name;
70
maxime schoeni

とてもシンプル

let file = $("#fileupload")[0].files[0]; 
file.name
25
Uchenna

想定：

<input type="file" name="file1" id="theFile">

JavaScriptは次のようになります。

var fileName = document.getElementById('theFile').files[0].name;
13
Xedret
var pieces = str.split('\\');
var filename = pieces[pieces.length-1];
7
TM.

私はこのバージョンを自分で作成しました。私の関数は、必要なものをすべて抽出するために使用できます。すべてを必要としない場合は、いくつかのコードを簡単に削除できます。

<html>
<body>
<script type="text/javascript">
// Useful function to separate path name and extension from full path string
function pathToFile(str)
{
    var nOffset = Math.max(0, Math.max(str.lastIndexOf('\\'), str.lastIndexOf('/')));
    var eOffset = str.lastIndexOf('.');
    if(eOffset < 0 && eOffset < nOffset)
    {
        eOffset = str.length;
    }
    return {isDirectory: eOffset === str.length, // Optionally: && nOffset+1 === str.length if trailing slash means dir, and otherwise always file
            path: str.substring(0, nOffset),
            name: str.substring(nOffset > 0 ? nOffset + 1 : nOffset, eOffset),
            extension: str.substring(eOffset > 0 ? eOffset + 1 : eOffset, str.length)};
}

// Testing the function
var testcases = [
    "C:\\blabla\\blaeobuaeu\\testcase1.jpeg",
    "/tmp/blabla/testcase2.png",
    "testcase3.htm",
    "C:\\Testcase4", "/dir.with.dots/fileWithoutDots",
    "/dir.with.dots/another.dir/"
];
for(var i=0;i<testcases.length;i++)
{
    var file = pathToFile(testcases[i]);
    document.write("- " + (file.isDirectory ? "Directory" : "File") + " with name '" + file.name + "' has extension: '" + file.extension + "' is in directory: '" + file.path + "'<br />");
}
</script>
</body>
</html>

次を出力します。

  • 「testcase1」という名前のファイルの拡張子は「jpeg」で、ディレクトリは「C：\ blabla\blaeobuaeu」です。
  • 「testcase2」という名前のファイルの拡張子は「png」で、ディレクトリは「/ tmp/blabla」です。
  • 'testcase3'という名前のファイルには拡張子があります： 'htm'はディレクトリにあります： ''
  • 'Testcase4'という名前のディレクトリには拡張子があります： ''はディレクトリ： 'C：'にあります
  • 'fileWithoutDots'という名前のディレクトリには拡張子があります： ''はディレクトリ： '/dir.with.dots'にあります
  • 名前が ''のディレクトリには拡張子があります： ''はディレクトリにあります： '/dir.with.dots/another.dir'

&& nOffset+1 === str.lengthをisDirectoryに追加すると：

  • 「testcase1」という名前のファイルの拡張子は「jpeg」で、ディレクトリは「C：\ blabla\blaeobuaeu」です。
  • 「testcase2」という名前のファイルの拡張子は「png」で、ディレクトリは「/ tmp/blabla」です。
  • 'testcase3'という名前のファイルには拡張子があります： 'htm'はディレクトリにあります： ''
  • 'Testcase4'という名前のディレクトリには拡張子があります： ''はディレクトリ： 'C：'にあります
  • 'fileWithoutDots'という名前のディレクトリには拡張子があります： ''はディレクトリ： '/dir.with.dots'にあります
  • 名前が ''のディレクトリには拡張子があります： ''はディレクトリにあります： '/dir.with.dots/another.dir'

テストケースを考えると、この関数がここで提案されている他の方法と比較して非常に堅牢に機能することがわかります。

\\に関する初心者への注意：\はエスケープ文字です。たとえば、\ nは改行を意味し、\ tはタブを意味します。\nを記述できるようにするには、実際に\\ nと入力する必要があります。

4
Yeti

すべての拡張機能、つまり/tmp/test/somefile.tar.gzからsomefileを削除すると仮定します。

正規表現を使用した直接アプローチ：

var filename = filepath.match(/^.*?([^\\/.]*)[^\\/]*$/)[1];

正規表現と配列操作を使用した代替アプローチ：

var filename = filepath.split(/[\\/]/g).pop().split('.')[0];
3
vog

入力：C:\path\Filename.ext
出力：Filename

HTMLコードで、File onChange値を次のように設定します...

<input type="file" name="formdata" id="formdata" onchange="setfilename(this.value)"/>

テキストフィールドIDが「wpName」であると仮定します...

<input type="text" name="wpName" id="wpName">

JavaScript

<script>
  function setfilename(val)
  {
    filename = val.split('\\').pop().split('/').pop();
    filename = filename.substring(0, filename.lastIndexOf('.'));
    document.getElementById('wpName').value = filename;
  }
</script>
2
DxTx
// HTML
<input type="file" onchange="getFileName(this)">

// JS
function getFileName(input) {
    console.log(input.files[0].name) // With extension
    console.log(input.files[0].name.replace(/\.[^/.]+$/, '')) // Without extension
}

拡張機能を削除する方法

1
Mikel

高く評価された回答のどちらも、実際には「拡張子なしのファイル名のみ」を提供するものではなく、他の解決策はこのような単純な仕事にはあまりにも多くのコードです。

これは、JavaScriptプログラマーにとってはワンライナーになるはずです。これは非常に単純な正規表現です。

function basename(prevname) {
    return prevname.replace(/^(.*[/\\])?/, '').replace(/(\.[^.]*)$/, '');
}

最初に、最後のスラッシュ（存在する場合）までを取り除きます。

次に、最後の期間が存在する場合は、それ以降のすべてを削除します。

シンプルで、堅牢で、求められているものを正確に実装します。何か不足していますか？

1
Jon Watte

JQueryを使用している場合

$("#fileupload").val();
0
Rajat Bansal

上記の回答のどれも私にとってはうまくいきませんでした、ここに無効化された入力をファイル名で更新する私の解決策があります：

<script type="text/javascript"> 
  document.getElementById('img_name').onchange = function () {
  var filePath = this.value;
    if (filePath) {
      var fileName = filePath.replace(/^.*?([^\\\/]*)$/, '$1');
      document.getElementById('img_name_input').value = fileName;
    }
  };
</script>
0
sigi