그림파일 교체 (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
파일업로드 페이지에서 파일 경로 처리를 어떻게 했는지 확인해보세요
아마 파일 경로처리에 문제가 있는것이 아닐까 싶습니다
저장 페이지 소스가 없으니 ....
아~ 브라우저 보안 관련된 사항이군요....
다른 방법을 찾아 봐야 겠네요..
https://stackoverflow.com/questions/4851595/how-to-resolve-the-c-fakepath
<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">
간단하게 처리하려면 이런 식으로도 가능합니다.