사용자가 파일을 선택할 때 파일 이름을 얻는 방법 ?
이전에 비슷한 질문을 보았지만 보안상의 이유로 해결책이 없습니다.
그러나 오늘 나는 티켓을 열고 백엔드에 파일을 첨부 할 때 hostmonster가 성공적으로 구현 한 것을 봅니다.
그것은 파이어 폭스와 IE (정확히 버전 8)에서 모두 작동합니다.
정확히 클라이언트 측 스크립팅인지 확인했으며 요청이 전송되지 않았습니다 (방화 버그 포함).
이제이 질문을 다시 생각해볼 수 있을까요?
당신이 얻을 수있는 파일 이름을 ,하지만 당신은 전체 클라이언트 파일 시스템 경로를 얻을 수 없습니다.
받는 사람에 액세스하려고 value파일의 속성 input상의 change이벤트입니다.
대부분의 브라우저는 파일 이름 만 제공 하지만 IE8과 같은 예외는 다음 과 같은 가짜 경로를 제공합니다 . "C:\fakepath\myfile.ext"이전 버전 ( IE <= 6 )은 실제로 전체 클라이언트 파일 시스템 경로를 제공합니다 (결핍으로 인해 보안).
document.getElementById('fileInput').onchange = function () {
alert('Selected file: ' + this.value);
};
다음 코드를 사용할 수 있습니다.
JS
function showname () {
var name = document.getElementById('fileInput');
alert('Selected file: ' + name.files.item(0).name);
alert('Selected file: ' + name.files.item(0).size);
alert('Selected file: ' + name.files.item(0).type);
};
HTML
<body>
<p>
<input type="file" id="fileInput" multiple onchange="showname()"/>
</p>
</body>
방금 이것을 테스트했으며 firefox 및 IE에서 작동하는 것 같습니다.
<html>
<head>
<script type="text/javascript">
function alertFilename()
{
var thefile = document.getElementById('thefile');
alert(thefile.value);
}
</script>
</head>
<body>
<form>
<input type="file" id="thefile" onchange="alertFilename()" />
<input type="button" onclick="alertFilename()" value="alert" />
</form>
</body>
</html>
지금까지 테스트 한 모든 브라우저 (IE8에서 IE11, Chrome, FF 등) 에서 지원되는 Simple Javascript 를 통해이 질문에 답할 것 입니다.
다음은 코드입니다.
function GetFileSizeNameAndType()
{
var fi = document.getElementById('file'); // GET THE FILE INPUT AS VARIABLE.
var totalFileSize = 0;
// VALIDATE OR CHECK IF ANY FILE IS SELECTED.
if (fi.files.length > 0)
{
// RUN A LOOP TO CHECK EACH SELECTED FILE.
for (var i = 0; i <= fi.files.length - 1; i++)
{
//ACCESS THE SIZE PROPERTY OF THE ITEM OBJECT IN FILES COLLECTION. IN THIS WAY ALSO GET OTHER PROPERTIES LIKE FILENAME AND FILETYPE
var fsize = fi.files.item(i).size;
totalFileSize = totalFileSize + fsize;
document.getElementById('fp').innerHTML =
document.getElementById('fp').innerHTML
+
'<br /> ' + 'File Name is <b>' + fi.files.item(i).name
+
'</b> and Size is <b>' + Math.round((fsize / 1024)) //DEFAULT SIZE IS IN BYTES SO WE DIVIDING BY 1024 TO CONVERT IT IN KB
+
'</b> KB and File Type is <b>' + fi.files.item(i).type + "</b>.";
}
}
document.getElementById('divTotalSize').innerHTML = "Total File(s) Size is <b>" + Math.round(totalFileSize / 1024) + "</b> KB";
} <p>
<input type="file" id="file" multiple onchange="GetFileSizeNameAndType()" />
</p>
<div id="fp"></div>
<p>
<div id="divTotalSize"></div>
</p>* KB (KB) 단위로 파일 크기를 표시하고 있습니다. MB 단위를 얻으려면 1024 * 1024 등 *으로 나눕니다.
선택시 다음과 같은 파일 출력을 수행합니다. 
ReferenceURL : https://stackoverflow.com/questions/2189615/how-to-get-file-name-when-user-select-a-file-via-input-type-file
'programing' 카테고리의 다른 글
| Git에서 풀 요청을 보내는 방법 (0) | 2020.12.27 |
|---|---|
| LaTex에서 첫 번째 섹션이 발생하는 페이지 번호를 어떻게 시작할 수 있습니까? (0) | 2020.12.27 |
| 열이 Null을 허용하는지 확인하는 쿼리 (0) | 2020.12.27 |
| 자바 : String []을 List 또는 Set으로 변환하는 방법 (0) | 2020.12.27 |
| 정적 필드는 내부적으로 정확히 어떻게 작동합니까? (0) | 2020.12.27 |