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

파일을 사용하여 파일을 선택하는 동안 파일의 전체 경로를 얻는 방법 <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

전체 폴더를 업로드하는 것이 옵션이라면

<input type="file" webkitdirectory directory multiple/>

변경 이벤트에는 다음이 포함됩니다.

.target.files[...].webkitRelativePath: "FOLDER/FILE.ext"

당신은 그렇게해서는 안됩니다 ... 그리고 나는 최신 브라우저에서 그것을 시도하는 것은 쓸모가 없다고 생각합니다 (내가 아는 것에서) ... 반면에 모든 최신 브라우저는 이것을 허용하지 않을 것입니다 ...

서버 측 값을 얻는 것과 같은 해결 방법을 찾기 위해 갈 수있는 다른 링크는 있지만 클라이언트 측에서는 아닙니다 (javascript)

jQuery를 사용하여 파일 입력의 전체 경로
Firefox 3의 HTML 입력 양식에서 파일 경로를 얻는 방법

파일 요소가 있고 files필요한 모든 것을 포함하는 배열 호출

var file = document.getElementById("upload");

file.addEventListener("change", function() {
    for (var i = 0; i < file.files.length; i++) {
        console.log(file.files[i].name);
    }
}, false);

선택한 파일의 전체 경로를 가져 와서 IE11 및 MS Edge 만 업로드 할 수 있습니다.

var fullPath = Request.Form.Files["myFile"].FileName;