web-dev-qa-db-ja.com

javascript-入力type = fileからファイル名と拡張子を取得

ファイルアップロード入力があり、参照ボタンをクリックしてファイルを選択すると、ファイル名と拡張子を2つの入力テキストボックスに表示したい（コードサンプルを参照）。拡張子で正しく動作しますが、ファイル名にはパスが表示され、fakepathの警告が表示されます。私はその理由を理解していますが、これを実行してファイル名をそのボックスに入れる良い方法は何ですか。パスは必要ありません。

function getoutput(){
    outputfile.value=inputfile.value.split('.')[0];
    extension.value=inputfile.value.split('.')[1];}
    <input id='inputfile' type='file' name='inputfile' onChange='getoutput()'><br>
    Output Filename <input id='outputfile' type='text' name='outputfile'><br>
    Extension <input id='extension' type='text' name='extension'>
javascripthtmlformsfile-uploadinput
8
CheeseFlavored

lastIndexOf を使用して最後の\をインデックスとして取得し、 substr を使用して\の最後のインデックスから始まる残りの文字列を取得します

function getFile(filePath) {
        return filePath.substr(filePath.lastIndexOf('\\') + 1).split('.')[0];
    }

    function getoutput() {
        outputfile.value = getFile(inputfile.value);
        extension.value = inputfile.value.split('.')[1];
    }
<input id='inputfile' type='file' name='inputfile' onChange='getoutput()'><br>
    Output Filename <input id='outputfile' type='text' name='outputfile'><br>
    Extension <input id='extension' type='text' name='extension'>

[〜＃〜] update [〜＃〜]

function getoutput(event) {

  if (!event || !event.target || !event.target.files || event.target.files.length === 0) {
    return;
  }

  const name = event.target.files[0].name;
  const lastDot = name.lastIndexOf('.');

  const fileName = name.substring(0, lastDot);
  const ext = name.substring(lastDot + 1);

  outputfile.value = fileName;
  extension.value = ext;
  
}
<input id='inputfile' type='file' name='inputfile' onChange='getoutput(event)'><br>
  Output Filename <input id='outputfile' type='text' name='outputfile'><br>
  Extension <input id='extension' type='text' name='extension'>
14
Junius L.

これは少し古い投稿です...ただ情報のために

   var files = event.target.files
   var filename = files[0].name
   var extension = files[0].type

タイプには、たとえば、拡張子がjpegイメージの場合、拡張子があります。

extension = image/jpeg

または、pdfの場合、

extension = application/pdf

正確な値を取得するには、extension.replace（/// g、 ''）を実行します。値を取得します。

14
Dhatri Suresh
var filePath = $("#inputFile").val(); 
var file_ext = filePath.substr(filePath.lastIndexOf('.')+1,filePath.length);
console.log("File Extension ->-> "+file_ext);

ファイル名にドットが含まれていれば機能します。

4
Poorna

これを試すことができます：

var fullPath = inputfile.value.split('.')[0];
var filename = fullPath.replace(/^.*[\\\/]/, '');
outputfile.value=filename;`

これにより、ファイル名以外のすべてが削除されます。

JavaScriptを使用してフルパスからファイル名を取得する方法？ から取得しました。

2
Valentin Gavran

最初にファイル名を取得してから、さまざまな部分にスライスします。

const media_file = event.target.files[0] // event is from the <input> event
const filename = media_file.name

let last_dot = filename.lastIndexOf('.')
let ext = filename.slice(last_dot + 1)
let name = filename.slice(0, last_dot)
1
chidimo

file [0] .typeから、拡張子を取得できます

file [0]は、ファイル{名前： "hcl_icon.ico"、lastModified：1559301004000、webkitRelativePath： ""、サイズ：1150、タイプ： "image/x-icon"}

または、ファイルリーダーreader.onload = function（e）{} e.target.resultにより、ファイルのsrcに含まれるデータに拡張子が付きます

0
Rashmi HazeL ivy DorisFay

シンプルかつ迅速。

   var files = event.target.files[0]
   // for getting only extension 
   var fileExtension = files.type.split("/").pop();
   var fileName = files.name
0
Salman Mehmood

これが便利なコードです。

    String extension = fileName.substring(fileName.lastIndexOf('.')+1);
    String name = fileName.substring(0, fileName.lastIndexOf('.'));
0
Remario