JavaScript- 파일 입력 제어에서 파일 이름을 추출하는 방법

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

  •  21-08-2019
  •  | 
  •  

문제

사용자가 웹 페이지에서 파일을 선택하면 파일 이름 만 추출 할 수 있습니다.

str.search function을 시도했지만 파일 이름이 다음과 같은 경우 실패하는 것 같습니다. C : 업로드 ilike.this.file.jpg.

확장없이 파일 이름 만 추출 할 수 있습니까?

도움이 되었습니까?

해결책

당신의 가정 u003Cinput 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}/{filename})를 얻으려면 파일 이름을 가져 오기 위해 다음과 같은 것을 사용할 수 있습니다.

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

"POP 방법은 배열에서 마지막 요소를 제거하고 해당 값을 발신자에게 반환합니다." 모질라 개발자 네트워크

예시:

에서: "/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.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/another.dir'

테스트 케이스가 주어지면이 기능이 여기에서 제안 된 다른 방법에 비해 매우 강력하게 작동하는 것을 볼 수 있습니다.

: 에 대한 초보자에 대한 참고 : 는 탈출 문자입니다. 예를 들어 n은 Newline 및 ta 탭을 의미합니다. n을 쓸 수 있으려면 실제로 n을 입력해야합니다.

나는 당신이 모든 확장을 제거하고 싶다고 생각합니다. /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">

자바 스크립트 

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

jQuery를 사용하는 경우 

$("#fileupload").val();
라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top