[html | JavaScript] 파일 업로드 버튼만들기 / 파일 정보 가져오기

게시글이 도움이 되었다면

게시글의 광고 클릭,

[로그인]이 필요 없는 ❤ 눌러주세요:)

 

파일을 업로드 하는 코드가 필요했습니다.

 

[HTML 코드]

* BootStrap 기반 html 코드입니다.

 

<div class="col-6 mb-5" id="fileAdd">
	<div class="text-end mt-3">
		<button class="btn btn-outline-primary" onclick="addFiles()">Add File</button>
		<input type="file" id="files" style="display: none;"/>
	</div>
	<div class="table-responsive mt-3" style="max-height: 300px;">
		<table class="table table-hover text-center" id="table">
		<thead class="table-secondary" style="position: sticky; top: 0; border-collapse: separate;">
			<tr>
				<th scope="col">File Name</th>
			</tr>
		</thead>
		<tbody class="align-middle" id="file-info">
		</tbody>
		</table>
	</div>
</div>

 

<input type = "file"> 태그를 이용하면, 파일을 업로드 할 수 있는 창을 띄울 수 있습니다.

 

하지만, input type은 버튼이 아닙니다. 그래서 버튼을 만들어서 그 버튼을 누르면 파일을 업로드 할 수 있게 구현하는것이 일반적입니다.

 

저는 'Add File' 이라는 버튼이 보이도록 만들고 그 버튼을 눌렀을 때, 파일 첨부가 가능한 창이 열리도록 코드를 짰습니다.

 

참고로, 단 한개의 파일만 업로드 가능하게 짜고 싶어 multiple 속성(드래그나, 여러 파일 선택을 통해 한번에 여러개의 파일 업로드)은 사용하지 않았습니다.

 

여러개의 파일을 선택 가능하게 하고자 하시는 분은 아래의 코드를 사용해주세요. 

<input type = "file" multiple> 을 사용하면 다중파일선택이 가능합니다.

 

<div class="col-6 mb-5" id="fileAdd">
	<div class="text-end mt-3">
		<button class="btn btn-outline-primary" onclick="addFiles()">Add File</button>
		<input type="file" id="files" multiple style="display: none;"/>
	</div>
	<div class="table-responsive mt-3" style="max-height: 300px;">
		<table class="table table-hover text-center" id="table">
		<thead class="table-secondary" style="position: sticky; top: 0; border-collapse: separate;">
			<tr>
				<th scope="col">File Name</th>
			</tr>
		</thead>
		<tbody class="align-middle" id="file-info">
		</tbody>
		</table>
	</div>
</div>

 

 

---

 

 

[JavaScript  + JQuery코드]

 

let usrFile = {};

$(function () {
	addFileEvent();
})

function addFiles() {
	$('#files').trigger("click");
}

function addFileEvent() {
        let fileInfo = document.getElementById('file-info');
        $("#files").on("change", function (obj) {
            usrFile = obj.target.files[0]
            let html = "";
            fileInfo.innerHTML = "";

            html += '<tr>';
            html += '<td>' + usrFile.name + '</td>';
            html += '</tr>';
            $("#file-info").append(html);
        });
    }

 

단일파일을 업로드 했을 때, 내용은 아래와 같습니다.

 

1) usrFile 이라는 새로운 Object를 정의

2) files 버튼 (Add File 버튼) 클릭 시, input type="file"이 동작하도록 구현

3) 파일 업로드에 변동사항이 생길 때(사용자가 파일 선택), 그 해당 파일의 정보를 가지고오도록 구현

4) 파일이 무조건 한개이므로, usrFile에는 obj.target.files[0]을 넣음

5) 파일의 이름을 테이블에 추가

 

 

여러개의 파일을 업로드 할 때는 아래의 코드를 사용해주세요(Multiple 속성)

let filesArr = [];

$(function () {
	addFileEvent();
})

function addFiles() {
	$('#files').trigger("click");
}

function addFileEvent() {
        let fileInfo = document.getElementById('file-info');
        $("#files").on("change", function (obj) {
		for (let i = 0; i < obj.target.files.length; i++) {
            filesArr.push(obj.target.files[i])
		}
            let html = "";
		for (let i = 0; i < filesArr.length; i++) {

            html += '<tr>';
            html += '<td>' + filesArr[i].name + '</td>';
            html += '</tr>';
        }
            $("#file-info").append(html);
        });
    }

 

1) filesArray이라는 새로운 Array 를 정의

2) files 버튼 (Add File 버튼) 클릭 시, input type="file"이 동작하도록 구현

3) 파일 업로드에 변동사항이 생길 때(사용자가 파일 선택), 그 해당 파일의 정보들을 가지고오도록 구현

4) 반복문을 통해 여러개의 파일 정보를 filesArr에 넣어줌

5) 반복문을 통해 파일의 이름들을 테이블에 추가

 

---

 

 

See the Pen file Upload by Ella (@Ella_develop_floor) on CodePen.

 

---

 

 

 

게시글이 도움이 되었다면

[로그인]이 필요 없는 ❤ 눌러주세요:)