jQuery를 사용하여 경로 없이 파일 입력의 선택한 파일 이름 가져오기

jQuery를 사용하여 경로 없이 파일 입력의 선택한 파일 이름 가져오기

사용한 항목:

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

파일 이름을 선택했지만 "C:\fakepath\filename.doc"에서와 같이 전체 경로를 반환했습니다."가짜 경로" 부분은 실제로 거기에 있었습니다. 그것이 있어야 하는지는 확실하지 않지만, 파일 업로드의 파일 이름으로 작업하는 것은 이번이 처음입니다.

어떻게 파일 이름(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 : "";

모든 OS에서 경로 작업 수행

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

예

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

둘 다 리턴

filename.doc
filename.doc

크롬 반품C:\fakepath\...보안상의 이유로 - 웹 사이트에서 컴퓨터의 파일 경로와 같은 컴퓨터에 대한 정보를 얻을 수 없습니다.

문자열의 파일 이름 부분만 가져오려면 ...을 사용할 수 있습니다.

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

jsFiddle.

...아니면 정규 표현...

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

jsFiddle.

...또는...

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

jsFiddle.

제가 하는 방법은 이렇습니다. 꽤 잘 작동합니다.

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

이 대안이 가장 적합해 보입니다.

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

이런 거 어때요?

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

꼭 jquery여야 하나요?아니면 그냥 자바스크립트의 네이티브를 사용할 수 있습니까?yourpath.split("\\")줄을 배열로 나누는 것?

<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>

컨트롤에서 첫 번째 파일을 가져온 다음 파일의 이름을 가져오면 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; 
} 

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

  <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>

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

다음을 사용하여 제거할 수도 있습니다.match

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

언급URL : https://stackoverflow.com/questions/6365858/use-jquery-to-get-the-file-inputs-selected-filename-without-the-path