C : \ fakepath를 해결하는 방법?

<input type="file" id="file-id" name="file_name" onchange="theimage();">

이것은 내 업로드 버튼입니다.

<input type="text" name="file_path" id="file-path">

이것은 파일의 전체 경로를 표시 해야하는 텍스트 필드입니다.

function theimage(){
 var filename = document.getElementById('file-id').value;
 document.getElementById('file-path').value = filename;
 alert(filename);
}

이것은 내 문제를 해결하는 JavaScript입니다. 그러나 경고 값에서

C:\fakepath\test.csv 

그리고 Mozilla는 나에게 다음을 제공합니다.

test.csv

그러나 로컬 정규 파일 경로를 원합니다 . 이 문제를 해결하는 방법?

이것이 브라우저 보안 문제로 인한 것이라면 이것을 대체하는 방법은 무엇입니까?

일부 브라우저에는 JavaScript가 파일의 로컬 전체 경로를 알지 못하게하는 보안 기능이 있습니다. 클라이언트로서 서버가 로컬 시스템의 파일 시스템을 알기를 원하지 않습니다. 모든 브라우저에서이 작업을 수행하면 좋을 것입니다.

사용하다

document.getElementById("file-id").files[0].name; 

대신에

document.getElementById('file-id').value

onchange입력 파일 유형 의 입력 이벤트에서 FileReader 객체를 사용합니다 ! 이 예제는 readAsDataURL 함수를 사용하므로 태그가 있어야합니다. FileReader 객체에는 이진 데이터를 가져 오는 readAsBinaryString도 있습니다.이 데이터는 나중에 서버에서 동일한 파일을 만드는 데 사용할 수 있습니다.

예:

var input = document.getElementById("inputFile");
var fReader = new FileReader();
fReader.readAsDataURL(input.files[0]);
fReader.onloadend = function(event){
    var img = document.getElementById("yourImgTag");
    img.src = event.target.result;
}

Internet Explorer, 도구, 인터넷 옵션, 보안, 사용자 정의로 이동 한 경우 "파일을 서버에 업로드 할 때 로컬 디렉토리 경로 포함"을 찾아 "다운"방법을 클릭하십시오. 이 작동합니다

브라우저가 방해가되는 스크립트 등으로부터 우리를 구해 주어야한다는 것이 기쁘다. IE가 간단한 스타일 수정을 해킹 공격처럼 보이게하는 브라우저에 무언가를 넣는 것에 만족하지 않습니다!

<span>을 사용하여 파일 입력을 나타내므로 <input> 대신 <div>에 적절한 스타일을 적용 할 수 있습니다 (IE로 인해 다시 한 번). 이제는이 IE로 인해 사용자에게 가드와 최소한의 불안감을 줄 수있는 값을 가진 경로를 보여주고 자합니다.

어쨌든, 여기에 설명을 게시 한 사람들 덕분에 IE 브라우저 보안 : input [type = "file"]의 파일 경로에 "fakepath"를 추가 하여 사소한 해결사-상단을 정리했습니다 ...

아래 코드는 두 가지 작업을 수행합니다. 업로드 필드의 onBlur까지 onChange 이벤트가 시작되지 않고 사용자를 놀라게하지 않는 정리 된 파일 경로로 요소를 업데이트하는 IE8 버그를 수정합니다.

// self-calling lambda to for jQuery shorthand "$" namespace
(function($){
    // document onReady wrapper
    $().ready(function(){
        // check for the nefarious IE
        if($.browser.msie) {
            // capture the file input fields
            var fileInput = $('input[type="file"]');
            // add presentational <span> tags "underneath" all file input fields for styling
            fileInput.after(
                $(document.createElement('span')).addClass('file-underlay')
            );
            // bind onClick to get the file-path and update the style <div>
            fileInput.click(function(){
                // need to capture $(this) because setTimeout() is on the
                // Window keyword 'this' changes context in it
                var fileContext = $(this);
                // capture the timer as well as set setTimeout()
                // we use setTimeout() because IE pauses timers when a file dialog opens
                // in this manner we give ourselves a "pseudo-onChange" handler
                var ieBugTimeout = setTimeout(function(){
                    // set vars
                    var filePath     = fileContext.val(),
                        fileUnderlay = fileContext.siblings('.file-underlay');
                    // check for IE's lovely security speil
                    if(filePath.match(/fakepath/)) {
                        // update the file-path text using case-insensitive regex
                        filePath = filePath.replace(/C:\\fakepath\\/i, '');
                    }
                    // update the text in the file-underlay <span>
                    fileUnderlay.text(filePath);
                    // clear the timer var
                    clearTimeout(ieBugTimeout);
                }, 10);
            });
        }
    });
})(jQuery);

나는 같은 문제에 직면했다. IE8에서는 파일 입력 제어 후에 숨겨진 입력을 작성하여 해결할 수 있습니다. 이것을 이전 형제의 값으로 채 웁니다. IE9에서는이 문제가 수정되었습니다.

전체 경로를 알고 싶은 이유는 업로드하기 전에 자바 스크립트 이미지 미리보기를 만드는 것이 었습니다. 이제 선택한 이미지의 미리보기를 만들려면 파일을 업로드해야합니다.

uploded 파일의 전체 경로를 실제로 보내야하는 경우 브라우저가 보내지 않으면이 정보를 얻을 수있는 방법이 없으므로 서명 된 Java 애플릿과 같은 것을 사용해야합니다.

js로 localhost에서 전체 경로를 찾을 수없는 것 같지만 파일 이름을 표시하기 위해 fakepath를 숨길 수 있습니다. jQuery를 사용하여 경로없이 파일 입력의 선택된 파일 이름을 가져옵니다.

파일 리더를 사용하십시오.

$(document).ready(function() {
        $("#input-file").change(function() {
            var length = this.files.length;
            if (!length) {
                return false;
            }
            useImage(this);
        });
    });

    // Creating the function
    function useImage(img) {
        var file = img.files[0];
        var imagefile = file.type;
        var match = ["image/jpeg", "image/png", "image/jpg"];
        if (!((imagefile == match[0]) || (imagefile == match[1]) || (imagefile == match[2]))) {
            alert("Invalid File Extension");
        } else {
            var reader = new FileReader();
            reader.onload = imageIsLoaded;
            reader.readAsDataURL(img.files[0]);
        }

        function imageIsLoaded(e) {
            $('div.withBckImage').css({ 'background-image': "url(" + e.target.result + ")" });

        }
    }

내 경우에는 asp.net 개발 환경을 사용하고 있으므로 asynchronus ajax 요청으로 해당 데이터를 업로드하고 싶었습니다. [webMethod]에서 정적 요소가 아니기 때문에 파일 업 로더를 잡을 수 없으므로 원하는 이미지를 바이트로 변환하여 DB에 저장하는 것보다 경로를 수정하여 이러한 솔루션을 전환하십시오.

여기 내 자바 스크립트 함수가 도움이되기를 바랍니다.

function FixPath(Path)
         {
             var HiddenPath = Path.toString();
             alert(HiddenPath.indexOf("FakePath"));

             if (HiddenPath.indexOf("FakePath") > 1)
             {
                 var UnwantedLength = HiddenPath.indexOf("FakePath") + 7;
                 MainStringLength = HiddenPath.length - UnwantedLength;
                 var thisArray =[];
                 var i = 0;
                 var FinalString= "";
                 while (i < MainStringLength)
                 {
                     thisArray[i] = HiddenPath[UnwantedLength + i + 1];
                     i++;
                 }
                 var j = 0;
                 while (j < MainStringLength-1)
                 {
                     if (thisArray[j] != ",")
                     {
                         FinalString += thisArray[j];
                     }
                     j++;
                 }
                 FinalString = "~" + FinalString;
                 alert(FinalString);
                 return FinalString;
             }
             else
             {
                 return HiddenPath;
             }
         }

테스트 목적으로 만 여기에 :

 $(document).ready(function () {
             FixPath("hakounaMatata:/7ekmaTa3mahaLaziz/FakePath/EnsaLmadiLiYghiz");
         });
// this will give you : ~/EnsaLmadiLiYghiz

Sardesh Sharma의 답변 사용 보완 :

document.getElementById("file-id").files[0].path

전체 경로.