input type file 대신 다른 버튼으로 대체하고 reader 적용하는 방법

jquery를 활용하니 script에다가 jquery를 추가해주시길 바랍니다.

  <script 
  src="https://code.jquery.com/jquery-3.6.0.min.js" 
  integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" 
  crossorigin="anonymous">
  </script>

 

1. 프론트에 input type file, button, img form을 만듭니다. 

@extends('dashboard.authBase')

@section('content')

<div>
	<input type="file" id="imageInput" nmae="file" onchange="uploadFile(this)" enctype="multipart/form-data" style="display:none">
    <button id="img-upload-btn">reader</button>
    <img id="preview-image" src="#">
</div>

@endsection

@section('javascript')
    <script>

    </script>
@endsection

• 참고 사항▶
  • file을 넣을 때는 꼭 enctype="multipart/form-data"를 추가해야 정상적으로 image를 가져올 수 있습니다. 
  • input file에 style="display:none"을 한 이유는 button에다가 input file 기능을 대체하기 위함입니다.

2. button 클릭시 input file이 실행이 되면서 onchange event가 실행될 수 있게 구현합니다.

@section('javascript')
    <script>
        $(document).on("click", "#img-upload-btn", function(e){
            e.preventDefault();
            $('#imageInput').click();
        })
        function uploadFile(input){

        }
    </script>
@endsection

• 참고 사항▶
  • $('#imageInput').click()을 하게 되면 onchange="uploadFile(this)"가 실행이 되니깐 function uploadFile(input)에다가 FileReader 기능을 넣으면 됩니다. 

3. FileReader가 onload될 때 img src에다가 현재 이미지를 올린 경로로 대체하고 그 url을 불러옵니다.

@section('javascript')
    <script>
        $(document).on("click", "#img-upload-btn", function(e){
            e.preventDefault();
            $('#imageInput').click();
        })
        function uploadFile(input){
            var reader = new FileReader();
            reader.onload = function(e){
                $('#preview-image')
                .attr('src', e.target.result)
            };
            reader.readAsDataURL(input.files[0]);
        }
    </script>
@endsection

• 참고 사항▶
  • uploadFile class 안에 console.log(input.value)을 하게 되면 현재 넣은 이미지 정보를 확인할 수 있습니다. 그 경로를 src에다가 대체시키면 그 이미지 자리에는 file에 올린 이미지가 보이게 됩니다. 

응용을 하게 되면 jquery에다가 css 추가해서 각 id마다 적용하면 버튼 화면 클릭시 이미지 화면으로도 대체하는 것을 볼 수 있을 것입니다.