Javascript-コストを抽出する方法をファイル名のファイルから入力制御

StackOverflow https://stackoverflow.com/questions/857618

  •  21-08-2019
  •  | 
  •  

質問

ユーザが選択でファイルをwebページはこういうことができるように抽出すだけで、ファイル名を指定します。

ってみます。検索機能をしっかり失敗時にファイル名はこのようなもの: c:\uploads\ilike.this.file.jpg.

どのように抽出し、ファイルの名前を拡張子な?

役に立ちましたか？

解決

と仮定してお <input type="file"> idの アップロード こうばん:

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);
}

他のヒント

分割を行文字列({filepath}/{ファイル名})およびファイル名を取得しきものを使っておけば間違いないようになります:

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

"のポップ方法を削除し、その最後の要素からの配列を返しますことを 値として、呼び出し側に返します。" MOZILLAデベロッパー-ネットワーク

例:

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

す: "file.txt"

今やより簡単な方法：

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

非常に簡単な 

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

仮:

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

JavaScriptすることはできない。

var fileName = document.getElementById('theFile').files[0].name;

var pieces = str.split('\\');
var filename = pieces[pieces.length-1];

私はただ自分の版です。私の機能を抽出するのに使いたいから、必要がない場合はすべて、その中でも、簡単に除コードです。

<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.ます。ドット'
  • ディレクトリ名には拡張子："はディレクトリ:'/dir.ます。ドット/うです。dir'

と && nOffset+1 === str.length 加 isDirectory:

  • ファイル名'testcase1"の延長：'jpeg'はディレクトリ:'C:\blabla\blaeobuaeu'
  • ファイル名'testcase2"の延長：'png"がディレクトリ:'/tmp/blabla'
  • ファイル名'testcase3"の延長：'htm"がディレクトリ:"
  • ディレクトリの名前"Testcase4"の延長："はディレクトリ:'C'
  • ディレクトリの名前"fileWithoutDots"の延長："はディレクトリ:'/dir.ます。ドット'
  • ディレクトリ名には拡張子："はディレクトリ:'/dir.ます。ドット/うです。dir'

さらに多分見ることができる機能が働かなり堅調に推移と比較してその他の方法を提案します。

注初心者の\\:\でエスケープ文字は、例えば、何というのは改行ではアパート-マンションタブがあります。することができるように書くり、実際にタイプ\ .

いいストリップ全てにつ /tmp/test/somefile.tar.gz へ somefile.

直接的なアプローチとregex:

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

代替的なアプローチとregexおよび配列の操作

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

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

HTMLコードの設定ファイル onChange 値しんでみてはいかがでしょうか。

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

と仮定しておtextfield 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>

ものupvotedの答え"を提供でのファイル名拡張子なし"や、他のソリューションはあまりにも、行き過ぎたコードなどに簡単な仕事です。

こばされることが期待されるライナーで任意のJavaScriptプログラマを交換してください。すごくシンプルな正規表現:

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

最初に、ストリップも最後のスラッシュが存在する。

その後、ストリップも最後の期間が存在する。

理由は単純明快で強を実装していなどのお楽しみいただけます。私何かが足りない?

// 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
}

を除去する方法の拡張

この中から、答えたく、ここが私のソリューション更新に障害のある入力ファイル名:

<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>

ご利用の場合はjQueryし 

$("#fileupload").val();
ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top