채택완료

그림파일 교체 (src 변경)

파일선택버튼을 아래와 같이 만들고,

 
<input type="file" name="uploadfile" id="img1" onChange="showImg()">

 

위 에서 선택한 그림파일을 <div id="img2"></div> 자리에 보이게 하려고 합니다.

 

function showImg() {
    var input = document.getElementById("img1");
    var img = document.getElementById("img2");
    img.src = input.value;
    alert(input.value);
    alert(img.src);
}

 

안돼서 alert() 로 확인해 보니 input.value 에는 제대로 선택한 파일의 경로와 이름이 보이는데,
img.src 는 file:///c:/..유니코드문자...jpg 같은 식으로 보입니다.
왜 그렇죠?  어디가 잘못 된 것인가요?
 

...20분후...

아~ 지금 다시 보니까 input.value 에 그림파일 위치가 C:\fakepath\ 로 되어 있네요.

C:\fakepath\ 는 제 pc 에 없는 경로인데 왜 여기로 보이는지....???

다른 폴더에 있는 그림파일을 선택했는데 C:\fakepath\그림파일.jpg 이런식으로 경로를 보여주네요???

 

 

 

 

 

|

답변 3개

채택된 답변
+20 포인트

파일업로드 페이지에서 파일 경로 처리를 어떻게 했는지 확인해보세요

아마 파일 경로처리에 문제가 있는것이 아닐까 싶습니다

저장 페이지 소스가 없으니 ....

Copy
<script>
$(function() {
    $("#file").on("change", function(e) {
        var tmp = e.target.files[0];
        var img = URL.createObjectURL(tmp);
        $("#image").attr("src", img);
    });
});
</script>
<input type="file" id="file">
<img src="" id="image">

간단하게 처리하려면 이런 식으로도 가능합니다.

아~ 브라우저 보안 관련된 사항이군요....

다른 방법을 찾아 봐야 겠네요..

 

https://stackoverflow.com/questions/4851595/how-to-resolve-the-c-fakepath

 

답변을 작성하려면 로그인이 필요합니다.

🐛 버그신고