回答:
あなたと仮定の<input type =「ファイルを」>の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);
}
filename = filename.substring(0, filename.lastIndexOf('.'));
彼の方法は3文字以上の拡張子で失敗するため、.html、.jpegなど
var startIndex = Math.max(fullPath.lastIndexOf('\\'), fullPath.lastIndexOf('/')) + 1;
文字列({filepath} / {filename})を分割してファイル名を取得するには、次のようにします。
str.split(/(\\|\/)/g).pop()
「popメソッドは、配列から最後の要素を削除し、その値を呼び出し元に返します。」
Mozilla Developer Network
例:
から: "/home/user/file.txt".split(/(\\|\/)/g).pop()
あなたが得る: "file.txt"
var filename = filepath.replace(/^.*?([^\\\/]*)$/, '$1');
[\\/]
。また、ファイル拡張子の削除も求められました。完全なソリューションについては、stackoverflow.com
今日ではもっと簡単な方法があります:
var fileInput = document.getElementById('upload');
var filename = fileInput.files[0].name;
fileInput.files.length
呼び出す前に確認してください.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>
以下を出力します:
に&& nOffset+1 === str.length
追加isDirectory
:
テストケースを考えると、この関数は、ここで提案されている他の方法と比較して非常に堅牢に機能することがわかります。
初心者の\\に関する注意:\はエスケープ文字です。たとえば、\ nは改行と\ taタブを意味します。\ nを記述できるようにするには、実際に\\ nと入力する必要があります。
&& eOffset < nOffset
)。
入力: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>
非常に支持された回答のどちらも実際には「拡張子なしの単なるファイル名」を提供しておらず、他のソリューションはそのような単純な仕事にはあまりにも多くのコードです。
これは、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>