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]);

jquery 여야합니까? 아니면 JavaScript 네이티브 yourpath.split("\\")를 사용 하여 문자열을 배열로 분할 할 수 있습니까?

컨트롤에서 첫 번째 파일을 가져온 다음 파일 이름을 가져 오면 Chrome의 파일 경로를 무시하고 IE 브라우저의 경로를 수정합니다. 파일을 저장할 때 System.io.Path.GetFileNameIE 브라우저에서만 파일 이름을 가져 오려면 메소드를 사용해야 합니다

var fileUpload    = $("#ContentPlaceHolder1_FileUpload_mediaFile").get(0); 
var files         =  fileUpload.files; 
var mediafilename = ""; 

for (var i = 0; i < files.length; i++) { 
  mediafilename = files[i].name; 
} 

<script type="text/javascript">

    $('#upload').on('change',function(){
       // output raw value of file input
       $('#filename').html($(this).val().replace(/.*(\/|\\)/, '')); 

        // or, manipulate it further with regex etc.
        var filename = $(this).val().replace(/.*(\/|\\)/, '');
        // .. do your magic

        $('#filename').html(filename);
    });
</script>

var filename=location.href.substr(location.href.lastIndexOf("/")+1);
alert(filename);

이 대안이 가장 적절한 것 같습니다.

$('input[type="file"]').change(function(e){
        var fileName = e.target.files[0].name;
        alert('The file "' + fileName +  '" has been selected.');
});

여기에서 이렇게 호출 할 수 있습니다. 이것이 입력 파일 컨트롤입니다

  <input type="file" title="search image" id="file" name="file" onchange="show(this)"  />

이제 파일을 선택하면 호출되는 Jquery가 있습니다.

<script type="text/javascript">
    function show(input) {
        var fileName = input.files[0].name;
        alert('The file "' + fileName + '" has been selected.');               
            }

</script>

우리는 또한 그것을 사용하여 그것을 제거 할 수 있습니다 match

var fileName = $('input:file').val().match(/[^\\/]*$/)[0];
$('#file-name').val(fileName);