업로드할 이미지 파일 미리보기

:
생략

<form>
   <div class="form-group">
                <label>Add Photo</label>
                <div class="custom-file">
                    <input name="photos" class="custom-file-input files" accept="image/*" type="file" onchange="previewImage(this)"  multiple>
                    <label class="custom-file-label" data-browse="Browse"></label>

                </div>
            </div>

            <div id="preview" > </div> //미리 띄울 영역
</form>


<script> 
 
 function previewImage(f){

                document.getElementById('preview').innerHTML = '';

                var file = f.files;


                for(var i = 0; i < file.length ; i++)
                {



                    // 확장자 체크
                    if(!/\.(gif|jpg|jpeg|png)$/i.test(file[i].name)){
                        alert('gif, jpg, png 파일만 선택해 주세요.\n\n현재 파일 : ' + file[i].name);

                        // 선택한 파일 초기화
                        f.outerHTML = f.outerHTML;

                        document.getElementById('preview').innerHTML = '';

                    }
                    else {

                        // FileReader 객체 사용
                        var reader = new FileReader();

                        // 파일 읽기가 완료되었을때 실행
                        reader.onload = function(rst){
                            document.getElementById('preview').innerHTML += '<img width="200px" height="200px" src="' + rst.target.result + '">';
                        }

                        // 파일을 읽는다
                        reader.readAsDataURL(file[i]);
                    }
                }
            }
            
            
</script>


생략
: