파일업로드를 이미 구현되어있는 dropzone 자바스크립트 라이브러리를 사용하여 가장 쉽게 구현하는 방법을 정리해 드릴게요. 추가로 웹사이트에 간단하게 적용시키는 것까지 해보겠습니다.
서버 / 로컬서버
WAMP (Window, Apache, MySQL, PHP)
파일업로드를 구현하기 위해서는 서버가 있어야합니다. 업로드 후 서버단에서 php로 파일 처리를 해야하기 때문이죠. 로컬서버로 대신하셔도 됩니다.
▶ bitnami - wamp 환경을 만들어주는 bitnami 는 업데이트가 종료 되었습니다.
Dropzone 라이브러리
CDN
링크로 사용하시려면 cdn 주소는 다음과 같습니다. 링크가 포함된 html 소스는 아래에 다시 나오기 때문에 넘어가셔도 됩니다.
▶ Javascript
<script src="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.9.3/dropzone.min.js"></script>
▶ CSS
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.9.3/dropzone.min.css">
다운로드
아래 링크 주소에서 버전별로 다운로드 받을 수 있습니다. 필요한 파일은 dropzone.min.js 와 dropzone.min.css 입니다.
https://github.com/dropzone/dropzone/releases
파일 업로드 구현
HTML
▶ 먼저 파일업로드 폼이 있는 index.html파일을 구현해 보겠습니다. 심플하게 cdn호출과 폼 태그만 있습니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>File Upload Example</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.9.3/dropzone.min.css">
</head>
<body>
<form id="dropzone-upload-form" method="POST" action="upload.php" class="dropzone">
</form>
<script src="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.9.3/dropzone.min.js"></script>
</body>
</html>
파일 업로드 방식을 설명드리면 폼 위를 클릭 후 파일을 선택하거나 폼 위에 이미지를 드래그앤 드랍하면 자동으로 upload.php를 호출해 업로드됩니다.
PHP
이미지를 처리해 "images" 폴더에 업로드 받는 php파일입니다. "images" 폴더가 없으면 자동 생성합니다.
<?php
if ( !file_exists( 'images/' ) ) {
mkdir( 'images/', 0777, true);
}
$imagesFolder = '/images/';
if (!empty($_FILES)) {
$temp = $_FILES['file']['tmp_name'];
$target = dirname( __FILE__ ) . $imagesFolder;
$finalFile = $target . $_FILES['file']['name'];
move_uploaded_file( $temp, $finalFile );
}
?>
웹페이지 구현
다시 한 번 정리해 드리겠습니다. 우리가 필요한 파일은 index.html, upload.php 2개 입니다. 라이브러리를 다운로드 받으셨다면 dropzone.min.css 와 dropzone.min.js 까지 더해서 총 4개입니다.
HTML / PHP 저장
▶ 서버나 로컬서버 루트폴더에 dropzone24라는 폴더를 만들어 위에서 만든 index.html과 upload.php파일을 저장합니다. (꼭 폴더를 만드실 필요는 없습니다. 루트폴더에 바로 올리셔도 됩니다.)
▶ 라이브러리를 CDN을 사용하지 않고 어느정도 커스텀 하시고 싶으셔서 다운로드 하셨다면 역시 같은 폴더에 js와 css파일을 저장합니다. 이 경우 위의 소스에서 js와 css 호출 부분을 고치셔야 합니다.
<link rel="stylesheet" href="dropzone.min.css">
...
<script src="dropzone.min.js"></script>
웹브라우저
▶ 웹브라우저에 주소를 입력합니다. 로컬서버를 쓰신다면 주소창에 "localhost/dropzone2024/index.html"를 입력합니다.
▶ Form영역 안에 이미지를 드래그 앤 드랍 합니다.
▶ 서버에 파일이 업로드 되었습니다. 파일명도 그대로 저장됩니다.
가장 간단하게 dropzone 라이브러리를 사용해 파일업로드를 구현하는 방법을 설명드렸습니다. 파일 업로드 시 이미지파일만 받거나 업로드 파일 개수 제한 등은 dropzone 옵션설정을 통해 제어하실 수 있습니다.
| 관련포스트 |
| JavaScript | Ajax 와 Ajaxform 파일업로드 |
'웹 개발 > 웹프로그래밍' 카테고리의 다른 글
| Javascript | 자바스크립트 기초 문법 (75) | 2024.04.03 |
|---|---|
| Javascript | 비동기 처리 (콜백, 프로미스, await) (74) | 2024.04.01 |
| Javascript | jQuery 유용한 플러그인과 라이브러리 소개 (53) | 2024.03.25 |
| Javascript | jQuery UI 소개와 사용방법 (34) | 2024.03.22 |
| JavaScript | 클릭 시 복사 버튼 만들기 (clipboard.js) (34) | 2023.09.30 |
| JavaScript | Swiper 슬라이드 메뉴 (0) | 2021.02.07 |
| 코드이그나이터 | 데이터베이스 (0) | 2021.01.30 |
| 코드이그나이터 | 라이브러리 (0) | 2021.01.29 |
댓글