답변:
<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);
}
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 개발자 네트워크
예:
에서: "/home/user/file.txt".split(/(\\|\/)/g).pop()
당신은 얻는다 : "file.txt"
var filename = filepath.replace(/^.*?([^\\\/]*)$/, '$1');
[\\/]. 또한 파일 확장자도 제거하라는 요청을 받았습니다. 전체 솔루션은 다음을 참조하십시오. stackoverflow.com/a/32156800/19163
요즘에는 훨씬 더 간단한 방법이 있습니다.
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">자바 스크립트
<script>
function setfilename(val)
{
filename = val.split('\\').pop().split('/').pop();
filename = filename.substring(0, filename.lastIndexOf('.'));
document.getElementById('wpName').value = filename;
}
</script>높게 찬성 된 답변 중 어느 것도 실제로 "확장자가없는 파일 이름"을 제공하지 않으며 다른 솔루션은 이러한 간단한 작업에 너무 많은 코드입니다.
저는 이것이 모든 자바 스크립트 프로그래머에게 한 줄짜리가되어야한다고 생각합니다. 매우 간단한 정규식입니다.
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>