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)과 버튼 연결하기
자바스크립트 전체 링크 input을 이용하면 파일을 선택할 수 있도록 열기 창을 불러올 수 있다. 그러나 [파일 선택 - 선택된 파일 없음]이 아니라 버튼을 이용하고 싶은 경우가 있을 수 있다. 이런
bloodstrawberry.tistory.com
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 )
HTML JAVASCRIPT function loadImg( img, viewimg) { if ( img.files[0] ) { var reader = new FileReader(); reader.onload = function (e) { $( '#'+ viewimg ).attr('src', e.target.result ); } reader.readAsDataURL( img.files[0] ); } }
hatssarjy.tistory.com