[javascript] jQuery를 사용하여 경로없이 파일 입력의 선택된 파일 이름을 가져옵니다.

나는 이것을 사용했다 :

$('input[type=file]').val()

파일 이름을 선택했지만 “C : \ fakepath \ filename.doc”에서와 같이 전체 경로를 반환했습니다. “fakepath”부분은 실제로 존재했는지 확실하지 않지만 파일 업로드의 파일 이름으로 작업 한 것은 이번이 처음입니다.

파일 이름 (filename.doc)을 어떻게 얻을 수 있습니까?



답변

var filename = $('input[type=file]').val().split('\\').pop();

또는 C:\fakepath보안상의 이유로 항상 추가 되기 때문에 할 수 있습니다 .

var filename = $('input[type=file]').val().replace(/C:\\fakepath\\/i, '')


답변

아래 코드 만하면됩니다. 첫 번째 [0]은 HTML 요소에 액세스하는 것이고, 두 번째 [0]은 파일 업로드의 첫 번째 파일에 액세스하는 것입니다 (파일이없는 경우 유효성 검사 포함).

    var filename = $('input[type=file]')[0].files.length ? ('input[type=file]')[0].files[0].name : "";


답변

C:\fakepath\...보안상의 이유로 Chrome이 반환 됩니다. 웹 사이트에서 컴퓨터의 파일 경로와 같은 컴퓨터에 대한 정보를 얻을 수 없어야합니다.

문자열의 파일 이름 부분 만 얻으려면 다음을 사용할 수 있습니다 split()

var file = path.split('\\').pop();

jsFiddle .

… 또는 정규식

var file = path.match(/\\([^\\]+)$/)[1];

jsFiddle .

… 또는 lastIndexOf()

var file = path.substr(path.lastIndexOf('\\') + 1);

jsFiddle .


답변

모든 OS에서 경로 작업

var filename = $('input[type=file]').val().replace(/.*(\/|\\)/, '');

C:\fakepath\filename.doc
/var/fakepath/filename.doc

둘 다 반환

filename.doc
filename.doc


답변

여기 내가 어떻게하는지, 꽤 잘 작동합니다.

HTML에서 다음을 수행하십시오.

<input type="file" name="Att_AttributeID" onchange="fileSelect(event)" class="inputField" />

그런 다음 js 파일에서 간단한 함수를 작성하십시오.

function fileSelect(id, e){
    console.log(e.target.files[0].name);
}

여러 파일을 수행하는 경우 다음을 반복하여 목록을 가져올 수도 있습니다.

e.target.files[0].name


답변

가짜 경로를 피하기위한 추가 사항 :

var fileName = $('input[type=file]').val();
var clean=fileName.split('\\').pop(); // clean from C:\fakepath OR C:\fake_path 
alert('clean file name : '+ fileName);


답변

이런 건 어때?

var pathArray = $('input[type=file]').val().split('\\');
alert(pathArray[pathArray.length - 1]);