js input file의 이벤트 전달, 이미지파일 선택시 fakepath문제

1. js로 다른버튼을 선택해 <input type="file"의 파일선택 이벤트 연결방법

<input type='file' id='fileUp' style='display:none'/>

<button id='btn'></button>

<img src='' id='img'/>

있다고 가정하고

btn을 클릭했을경우 fileUp의 파일선택하도록 하는 방법

$('#btn').click(function(){

            $('#fileImg').click();

});

※1.출처) https://bloodstrawberry.tistory.com/356

파일 선택(input)과 버튼 연결하기

 

2. 이미지파일을 선택해서 바로 img에 반영하려 했으나 fakepath로 경로가 감춰지는 문제해결

$('#fileImg').change(function (e) {
                imgChange(e);
});

var reader = new FileReader();
reader.onload = function (e) {
                $('#img').attr("src" , e.target.result);
});
reader.readAsDataURL(e.target.files[0]);

※2.출처 ) https://hatssarjy.tistory.com/604

[JavaScript] File path 이미지 미리보기( fakepath )