[javascript] javascript, jquery-ajax를 사용하여 <input type = ‘file’> 변경시 선택한 파일의 전체 경로를 얻는 방법은 무엇입니까?

JAVASCRIPT / 글쓴이

파일을 사용하여 파일을 선택하는 동안 파일의 전체 경로를 얻는 방법 <input type=‘file’>

<input type="file" id="fileUpload">
<script type="text/javascript">
function getFilePath(){
     $('input[type=file]').change(function () {
         var filePath=$('#fileUpload').val();
     });
}
</script>

그러나 filePath var에는 only name선택된 파일이 포함되어 있습니다 full path.
인터넷에서 검색했지만 보안상의 이유로 브라우저 (FF, 크롬)는 파일 이름 만 제공하는 것 같습니다.
선택한 파일의 전체 경로를 얻는 다른 방법이 있습니까?

답변

보안상의 이유로 브라우저는이를 허용하지 않습니다. 즉, 브라우저의 JavaScript는 파일 시스템에 액세스 할 수 없지만 HTML5 파일 API를 사용하면 Firefox 만 mozFullPath특성을 제공 하지만 값을 얻으려고하면 빈 문자열을 리턴합니다.

$('input[type=file]').change(function () {
    console.log(this.files[0].mozFullPath);
});

http://jsfiddle.net/SCK5A/

따라서 시간을 낭비하지 마십시오.

편집 : 파일을 읽는 데 파일 경로가 필요한 경우 FileReader API를 대신 사용할 수 있습니다 . 다음은 SO에 대한 관련 질문입니다. 이미지를 업로드하기 전에 미리 봅니다.

답변

이 시도:

정확한 경로가 아닌 임시 경로를 제공합니다.이 jsfiddle 예제에서 선택한 이미지를 표시하려면이 스크립트를 사용할 수 있습니다 (다른 파일뿐만 아니라 selectng 이미지로 시도).

JS 피들

코드는 다음과 같습니다.

HTML :-

<input type="file" id="i_file" value="">
<input type="button" id="i_submit" value="Submit">
<br>
<img src="" width="200" style="display:none;" />
<br>
<div id="disp_tmp_path"></div>

JS :-

$('#i_file').change( function(event) {
    var tmppath = URL.createObjectURL(event.target.files[0]);
    $("img").fadeIn("fast").attr('src',URL.createObjectURL(event.target.files[0]));

    $("#disp_tmp_path").html("Temporary Path(Copy it and try pasting it in browser address bar) --> <strong>["+tmppath+"]</strong>");
});

정확히 당신이 찾고 있던 것이 아니지만 어딘가에 도움이 될 수 있습니다.

답변

보안 문제로 인해 브라우저에서이를 허용하지 않습니다.

input type = file 객체를 사용하여 파일을 선택한 경우 value 속성 값은 웹 페이지를 표시하는 데 사용되는 보안 영역에 대한 “서버에 파일을 업로드 할 때 로컬 디렉토리 경로 포함”보안 설정의 값에 따라 다릅니다. 입력 객체를 포함합니다.

선택한 파일의 정규화 된 파일 이름은이 설정이 활성화 된 경우에만 반환됩니다. 이 설정을 사용하지 않으면 Internet Explorer 8은 부적절한 정보 유출을 방지하기 위해 로컬 드라이브 및 디렉터리 경로를 문자열 C : \ fakepath \로 바꿉니다.

및 기타

);이벤트 변경 기능 종료시이를 놓쳤습니다 .

또한 변경 이벤트를위한 함수를 생성하지 말고 아래와 같이 사용하십시오.

<script type="text/javascript">

    $(function()
    {
        $('#fileUpload').on('change',function ()
        {
            var filePath = $(this).val();
            console.log(filePath);
        });
    });

</script>

답변

당신은 할 수 없습니다. 클라이언트 컴퓨터의 파일 시스템에 대해 알고 있으면 보안이 중지됩니다. MAC, PC, 태블릿 또는 인터넷 사용 가능 냉장고 일 수 있습니다. 알거나 알 수 없으며 알 수 없습니다. 전체 경로를 설정하면 클라이언트에 대한 정보를 얻을 수 있습니다 (예 : 네트워크 드라이브 등).

실제로 특정 조건에서 얻을 수 있지만 ActiveX 컨트롤이 필요하며 99.99 %의 환경에서는 작동하지 않습니다.

어쨌든이 파일을 사용하여 파일을 원래 위치로 복원 할 수는 없습니다 (다운로드가 저장되는 위치 또는 저장되는 경우를 전혀 제어 할 수 없기 때문에). 실제로 실제로는 그다지 유용하지 않습니다.

답변

이것을 의미 했습니까?

$('#i_file').change( function(event) {
var tmppath = URL.createObjectURL(event.target.files[0]);
    $("img").fadeIn("fast").attr('src',tmppath);
});

답변

다음 코드를 사용하여 업로드 된 파일의 작동중인 로컬 URL을 얻을 수 있습니다.

<script type="text/javascript">
    var path = (window.URL || window.webkitURL).createObjectURL(file);
    console.log('path', path);
</script>

답변

흥미로운 점 하나는 웹에서 사용할 수 없지만 Electron에서 JS를 사용하는 경우이 작업을 수행 할 수 있습니다.

표준 HTML5 파일 입력을 사용하면 추가로 path 실제 파일 경로가 포함 된 선택된 파일에 속성을 .

전체 문서 : https://github.com/electron/electron/blob/master/docs/api/file-object.md