자바스크립트 - 파일 입력 컨트롤에서 파일명을 추출하는 방법
사용자가 웹 페이지에서 파일을 선택할 때 파일 이름만 추출할 수 있기를 원합니다.
str.search 기능을 시도해 보았는데 파일 이름이 c:\uploads\ilike.this.file.jpg와 같은 경우 실패하는 것 같습니다.
확장자 없이 파일 이름만 추출하려면 어떻게 해야 합니까?
문자열({filepath}/{filename})을 분할하고 파일 이름을 가져오려면 다음과 같은 방법을 사용할 수 있습니다.
str.split(/(\\|\/)/g).pop()
"팝 메소드는 배열에서 마지막 요소를 제거하고 그 값을 호출자에게 반환합니다."
모질라 개발자 네트워크
예:
출처:"/home/user/file.txt".split(/(\\|\/)/g).pop()
다음을 얻을 수 있습니다."file.txt"
요즘은 훨씬 더 간단한 방법이 있습니다.
var fileInput = document.getElementById('upload');
var filename = fileInput.files[0].name;
<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);
}
아주 간단합니다.
let file = $("#fileupload")[0].files[0];
file.name
가정:
<input type="file" name="file1" id="theFile">
자바스크립트는 다음과 같습니다.
var fileName = document.getElementById('theFile').files[0].name;
모든 확장을 제거하고 싶으리라 생각합니다./tmp/test/somefile.tar.gz로.somefile.
regex를 사용한 직접 접근 방식:
var filename = filepath.match(/^.*?([^\\/.]*)[^\\/]*$/)[1];
regex 및 어레이 운영 방식의 대안적 접근 방식:
var filename = filepath.split(/[\\/]/g).pop().split('.')[0];
var pieces = str.split('\\');
var filename = pieces[pieces.length-1];
입력:C:\path\Filename.ext
출력:Filename
HTML 코드에서 파일을 설정합니다.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>
저는 이것을 제 자신만의 버전으로 만들었습니다.내 기능을 사용하여 원하는 모든 것을 추출할 수 있습니다. 필요하지 않으면 코드를 쉽게 제거할 수 있습니다.
<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\blaoobaeu'에 있습니다.
- 이름이 'testcase2'인 파일의 확장명: 'png'가 디렉토리: '/tmp/blabla'에 있습니다.
- 이름이 'testcase3'인 파일의 확장자: 'htm'이(가) 디렉토리: '에 있습니다.
- 이름이 'Testcase4'인 디렉토리의 확장명이 ''입니다. 디렉토리 'C:'에 있습니다.
- 이름이 'fileWithoutDots'인 디렉토리의 확장명: '가 디렉토리: '/dir.with.dots'에 있습니다.
- 이름이 ''인 디렉토리의 확장명은 '/dir.with.dots/another.dir'입니다.
와 함께&& nOffset+1 === str.length에 추가된isDirectory:
- 이름이 'testcase1'인 파일의 확장자: 'jpeg'가 디렉토리: 'C:\blabla\blaoobaeu'에 있습니다.
- 이름이 'testcase2'인 파일의 확장명: 'png'가 디렉토리: '/tmp/blabla'에 있습니다.
- 이름이 'testcase3'인 파일의 확장자: 'htm'이(가) 디렉토리: '에 있습니다.
- 이름이 'Testcase4'인 디렉토리의 확장명이 ''입니다. 디렉토리 'C:'에 있습니다.
- 이름이 'fileWithoutDots'인 디렉토리의 확장명: '가 디렉토리: '/dir.with.dots'에 있습니다.
- 이름이 ''인 디렉토리의 확장명은 '/dir.with.dots/another.dir'입니다.
테스트 사례를 고려할 때 이 기능은 여기서 제안된 다른 방법에 비해 상당히 강력하게 작동한다는 것을 알 수 있습니다.
\\: \는 탈출 문자입니다. 예를 들어 \n은 줄과 \t탭을 의미합니다.\n을 쓸 수 있게 하려면 실제로 \n을 입력해야 합니다.
높은 지지를 받은 답변 중 어느 것도 실제로는 "확장자 없이 파일 이름만" 제공하지 않으며, 다른 솔루션은 이러한 단순한 작업을 수행하기에는 너무 많은 코드입니다.
저는 이것이 자바스크립트 프로그래머에게 한 줄로 연결되어야 한다고 생각합니다.아주 간단한 규칙적인 표현입니다.
function basename(prevname) {
return prevname.replace(/^(.*[/\\])?/, '').replace(/(\.[^.]*)$/, '');
}
먼저 마지막 슬래시(있는 경우)까지 모든 것을 벗깁니다.
그런 다음 마지막 기간이 지난 후에 있으면 무엇이든 벗습니다.
단순하고 강력하며, 원하는 것을 정확하게 구현합니다.내가 뭘 빼놓았나요?
쉬운 경로:
제이쿼리
$("#fileInputId").on("change", () => {
alert($("#fileInputId")[0].files[0].name);
});
자바스크립트
document.getElementById("fileInputId").onchange = function() {
alert(document.getElementById("fileInputId").files[0].name)
};
// 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
}
var path = document.getElementById('upload').value;//take path
var tokens= path.split('\\');//split path
var filename = tokens[tokens.length-1];//take file name
위의 답변 중 어느 것도 제게 도움이 되지 않았습니다. 비활성화된 입력을 파일 이름으로 업데이트하는 솔루션은 다음과 같습니다.
<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();
언급URL : https://stackoverflow.com/questions/857618/javascript-how-to-extract-filename-from-a-file-input-control
'programing' 카테고리의 다른 글
| 최대 절전 모드 주석이 있는 mysql(기본적으로 해당 타임스탬프)에서 Java 날짜를 DATTIME에 매핑하려면 어떻게 해야 합니까? (0) | 2023.10.06 |
|---|---|
| JS 클라이언트 측 Exif 방향:JPEG 이미지 회전 및 미러링 (0) | 2023.10.06 |
| @RunWith 및 @ContextConfiguration으로 주석이 달린 jUnit 테스트에서 Spring 컨텍스트에 액세스하는 방법은 무엇입니까? (0) | 2023.10.06 |
| Powershell에서 Start-Website 명령을 실행할 때 "파일을 만들 수 없습니다" 오류가 발생했습니다. (0) | 2023.10.06 |
| 각진 안전하지 않은 링크 (0) | 2023.10.06 |