파일선택 버튼으로 받은 이미지를 화면에 보여주기
본문
파일선택 버튼으로 받은 이미지를 하얀 이미지 부분에 보여주기 위해서는 어떠한 코드를 사용해야 하나요? 이미지를 서버에 저장해서 보여주는 것은 성공했는데 저장하지 않은 상태에서 첨부받은 파일을 보여주는 방법을 모르겠습니다.
getLeftImgfile() js 함수를 불러 src를 변경하는 방식을 시도해보았지만 경로가 저장되어 있는 것이 아니기 때문에 오류가 발생하는 것 같습니다.
이 외에 어떠한 방법이 있을까요?
function getLeftImgfile(){
var x = document.getElementById("LeftfileButton").value;
if(x){
document.getElementById("showleftImg").src = document.getElementById("LeftfileButton").src;
}
}
<form name="reqform" method="post" action="fileUploadResult.php" enctype="multipart/form-data">
<center>
<div class="filebox">
<img src="./basicImg/backImg.jpg" height="130" width="160" id="showleftImg">
<p class="explanation2">왼쪽에 삽입할 이미지를 선택해주세요.<br></p>
<div class="file-upload preview-image">
<input class="fileButton" type="file" name="imgFile" accept="image/*" onclick="getLeftImgfile()" id="LeftfileButton" />
<br>
</div>
<input type="button" value="기존이미지 선택" class="button_img" onclick="openLeftPopup()"/>
<input type="hidden" id="leftImg" class="leftImg" value="">
</div>
<input type="submit" value="새로운 파일 업로드" class="button buttonNewfile" />
</center>
</form>
답변 1
이 문제가 여러번 올라오는데요!!
일단 답은 브라우저의 상태에 따라 가능/비가능 입니다.
이론은 파일을 불러서 브라우저 상에서
사용자의 디바이스 기기에 있는 파일의 경로를
보여주면 되는것이기는 하나 지원하지 않는 브라우저가 많습니다.
답변을 작성하시기 전에 로그인 해주세요.
