input type file multiple list (파일 업로드 리스트 확인)

JavaScript & HTML

input type file multiple list (파일 업로드 리스트 확인)

husks 2016. 9. 19. 16:02

파일업로드 하였을 경우 파일의 리스트를 보여주는 예제 입니다. (Spring으로 개발한 파일업로드는 여기를 참고하세요.)

아래 소스를 확인하시기 바랍니다.

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
30
31
32
33
<!doctype html>
<html lang="kr">
<head>
  <meta charset="utf-8">
  <title>demo</title>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
  <script>
    $(document).ready( function() {
 
        $("input[type=file]").change(function () {
            
            var fileInput = document.getElementById("contract_file");
            
            var files = fileInput.files;
            var file;
            
            for (var i = 0; i < files.length; i++) {
                
                file = files[i];
 
                alert(file.name);
            }
            
        });
 
    });
     
  </script>
</head>
<body>
    <input type="file" id="contract_file" multiple>
</body>
</html>

저작자표시 비영리 변경금지 (새창열림)