ProgrammingLanguageJavaScript

[JavaScript] 모달에서 이미지 및 동영상 출력

, , ,

서론

[사진 보기], [동영상 보기] 버튼을 클릭 시 모달창이 띄워지면서 사진 또는 동영상이 출력되도록 하는 예제입니다. 사진과 동영상 파일을 images 경로에 저장하여 출력하였고, 실제 구동되는 프로젝트에서는 웹 서버가 실행되는 곳의 특정 경로에 저장하여 URL을 불러와서 출력합니다.

html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title></title>
  </head>
  <body>
    <button type="button" class="btn" onClick="openImageModal()">사진 보기</button>
    <button type="button" class="btn" onClick="openVideoModal()">동영상 보기</button>

    <!-- 모달창 -->
    <div id="fileModal" class="modal fade" role="dialog">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header modal-header-sm">
            <h6 class="modal-title">사진/동영상 보기</h6>
            <button type="button" class="close" data-dismiss="modal">&times;</button>
          </div>
          <div class="modal-body text-center">
            <div id="file-viewer"></div>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>

javascript

JQuery를 이용하여 모달창을 생성합니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
// 이미지 출력 모달창 오픈
function openImageModal() {
  $('#file-viewer').empty();

  let img = document.createElement('img');
  img.setAttribute('src', 'images/image.jpg');
  img.setAttribute('class', 'img-fluid');

  $('#file-viewer').append(img);
  $('#fileModal').modal();
}

// 동영상 출력 모달창 오픈
function openVideoModal() {
  $('#file-viewer').empty();

  var div = document.createElement('div');
  div.setAttribute('class', 'embed-responsive embed-responsive-16by9');

  // video 태그 사용
  var video = document.createElement('video');
  video.setAttribute('class', 'embed-responsive-item');
  video.setAttribute('controls', 'controls');
  ideo.setAttribute('src', 'images/video.mp4');
  div.append(video);

  $('#file-viewer').append(div);
  $('#fileModal').modal();
}

응용

서버에서 파일를 조회하여 출력하도록 하는 예제입니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
const contextPath = '${pageContext.request.contextPath}';

$.ajax({
  url: contextPath + '/file/get',
  type: 'GET',
  success: function (file) {
    if (file.fileType == 'IMAGE') {
      var img = document.createElement('img');
      img.setAttribute('src', contextPath + '/uploads/' + file.fileName);
      img.setAttribute('class', 'img-fluid');

      $('#file-viewer').append(img);
    } else if (file.fileType == 'VIDEO') {
      var div = document.createElement('div');
      div.setAttribute('class', 'embed-responsive embed-responsive-16by9');

      var video = document.createElement('video');
      video.setAttribute('class', 'embed-responsive-item');
      video.setAttribute('controls', 'controls');
      video.setAttribute('src', contextPath + '/uploads/' + file.fileName);
      div.append(video);

      $('#file-viewer').append(div);
    }

    $('#fileModal').modal();
  },
});
Share