이미지 및 파일 업로드 방법 Code점화기 (예시 포함)

⚡ 스마트 요약

CodeIgniter 파일 업로드는 내장된 업로드 라이브러리를 사용하여 HTML 폼에서 서버 디렉터리로 이미지와 문서를 전송합니다. 이 예제는 업로드 폼, 파일 유형 및 크기를 검증하는 컨트롤러, 그리고 업로드 완료를 확인하는 결과 페이지를 구현합니다.

📁 핵심 과목: 업로드 라이브러리는 제출된 파일의 유효성을 검사하고 선택한 업로드 디렉터리에 파일을 저장하는 백엔드 작업을 처리합니다.
🖼️ 두 부분: 파일 업로드를 위해서는 입력 유형이 파일인 프런트엔드 HTML 폼과 제출을 처리하는 백엔드 컨트롤러가 필요합니다.
🔒 유형 화이트리스트: allowed_types 설정은 gif, jpg, png와 같이 나열된 확장자만 허용하고 PHP 스크립트와 같은 위험한 파일을 차단합니다.
📏 크기 제한: max_size, max_width, max_height 키는 해당 제한을 초과하는 파일을 거부하고 명확한 오류 메시지를 반환합니다.
📝 폼 인코딩: 폼의 인코딩 형식을 multipart/form-data로 설정해야 합니다. 그렇지 않으면 선택한 파일이 서버에 도달하지 않습니다.
📄 결과 메타데이터: 업로드 성공 시, upload->data()는 새로 저장된 이미지에 대한 링크를 생성하는 데 사용되는 파일 세부 정보를 반환합니다.
🤖 AI 지원: AI 도구는 업로드 양식, 컨트롤러 유효성 검사 규칙 및 오류 처리를 생성한 다음 보안 취약점을 검토할 수 있습니다.

Code이그나이터 파일 업로드

파일 관리는 대부분의 웹 애플리케이션에 필수적입니다. 만약 당신이 개발자라면,ping 콘텐츠 관리 시스템을 사용한다면 이미지, 워드 문서, PDF 보고서 등을 업로드할 수 있어야 합니다. 회원제 사이트를 운영하는 경우, 사용자들이 프로필 이미지를 업로드할 수 있는 기능을 제공해야 할 수도 있습니다. CodeIgniter의 파일 업로드 클래스를 사용하면 위의 모든 작업을 쉽게 수행할 수 있습니다.

이번 튜토리얼에서는 파일 업로드 라이브러리를 사용하여 파일을 로드하는 방법을 살펴보겠습니다.

이미지 업로드 Code이그나이터

파일 업로드 위치 Code이그나이터 이 시스템은 크게 프런트엔드와 백엔드 두 부분으로 구성됩니다. 프런트엔드는 `file` 타입의 폼 입력 필드를 사용하는 HTML 폼으로 처리됩니다. 백엔드에서는 파일 업로드 라이브러리가 폼에서 제출된 입력값을 처리하여 업로드 디렉터리에 저장합니다.

입력 양식부터 시작해 보겠습니다.

application/views 디렉터리에 files라는 새 디렉터리를 생성합니다.

application/views/files에 다음 파일을 추가합니다.

upload_form.php – 이 보기에는 입력 유형이 파일인 HTML 양식이 포함되어 있으며 처리를 위해 선택한 파일을 서버에 제출합니다.
upload_result.php – 이 화면은 업로드된 이미지의 결과를 표시하며, 결과를 볼 수 있는 링크도 포함되어 있습니다.

upload_form.php에 다음 코드를 추가하세요.

<!DOCTYPE html>
<html>
<head>
<title>CodeIgniter Image Upload</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div>
<h3>Select an image from your computer and upload it to the cloud</h3>
<?php
if (isset($error)){
echo $error;
}
?>
<form method="post" action="<?=base_url(0)?>" enctype="multipart/form-data">
<input type="file" id="profile_image" name="profile_image" size="33" />
<input type="submit" value="Upload Image" />
</form>
</div>
</body>
</html>

이리,

if (isset($error)){…}는 error 변수가 설정되었는지 확인합니다. 결과가 true이면 업로드 라이브러리에서 반환된 오류가 사용자에게 표시됩니다.
파일 형식을 선택하면 사용자가 컴퓨터에서 파일을 찾아 업로드할 수 있습니다.

upload_result.php 파일에 다음 코드를 추가하세요.

<!DOCTYPE html>
<html>
<head>
<title>Image Upload Results</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div>
<h3>Congratulations, the image has successfully been uploaded</h3>
<p>Click here to view the image you just uploaded
<?=anchor('images/'.$image_metadata['file_name'], 'View My Image!')?>
</p>
 
<p>
<?php echo anchor('upload-image', 'Go back to Image Upload'); ?>
</p>
</div>
</body>
</html>

이리,

앵커 헬퍼를 사용하여 이미지 디렉터리에 새로 업로드된 파일에 대한 링크를 생성합니다. 파일 이름은 파일이 성공적으로 업로드되었을 때 뷰로 전달되는 이미지 메타데이터에서 가져옵니다.

이제 이미지 업로드에 응답할 컨트롤러를 만들어 보겠습니다.

애플리케이션/컨트롤러에 ImageUploadController.php라는 새 파일을 추가합니다.

ImageUploadController.php에 다음 코드를 추가합니다.

<?php
 
defined('BASEPATH') OR exit('No direct script access allowed');
 
class ImageUploadController extends CI_Controller {
 
public function __construct() {
parent::__construct();
$this->load->helper('url', 'form');
}
 
public function index() {
$this->load->view('files/upload_form');
}
 
public function store() {
$config['upload_path'] = './images/';
$config['allowed_types'] = 'gif|jpg|png';
$config['max_size'] = 2000;
$config['max_width'] = 1500;
$config['max_height'] = 1500;
 
$this->load->library('upload', $config);
 
if (!$this->upload->do_upload('profile_image')) {
$error = array('error' => $this->upload->display_errors());
 
$this->load->view('files/upload_form', $error);
} else {
$data = array('image_metadata' => $this->upload->data());
 
$this->load->view('files/upload_result', $data);
}
}
 
}

이리,

class ImageUploadController는 CI_Controller를 확장합니다. {...}는 컨트롤러 클래스를 정의하고 기본 컨트롤러 CI_Controller를 확장합니다.
public function __construct() {…}는 상위 생성자 메서드를 초기화하고 URL 및 양식 도우미를 로드합니다.
public function index() {…}는 이미지 업로드 양식을 표시하는 데 사용되는 인덱스 메서드를 정의합니다.
public function store() {…}는 이미지를 업로드하고 웹 애플리케이션 서버에 저장하는 메서드를 정의합니다.
- $config['upload_path'] = './images/'; 이미지를 업로드해야 하는 디렉토리를 설정합니다.
- `$config['allowed_types'] = 'gif|jpg|png';`는 허용되는 파일 확장자를 정의합니다. 이는 보안상의 이유로 중요합니다. 허용된 파일 형식을 지정하면 이미지 파일만 업로드되고 PHP와 같은 다른 파일 형식은 서버 보안을 위협할 수 있으므로 업로드되지 않습니다.
- `$config['max_size'] = 2000;`은 최대 파일 크기를 킬로바이트 단위로 설정합니다. 예시에서 업로드 가능한 최대 파일 크기는 2,000KB(약 2MB)입니다. 사용자가 2,000KB보다 큰 파일을 업로드하려고 하면 이미지 업로드가 실패하고 라이브러리에서 오류 메시지가 표시됩니다.
- `$config['max_width'] = 1500;`는 이미지의 최대 너비를 설정하며, 이 경우 최대 너비는 1,500픽셀입니다. 이보다 큰 너비를 사용하면 오류가 발생합니다.
- $config['max_height'] = 1500; 최대 허용 높이를 정의합니다.
- $this->load->library('업로드', $config); 업로드 라이브러리를 로드하고 위에서 정의한 $config 배열로 초기화합니다.
- `$this->upload->do_upload('profile_image')가 실행되지 않으면 제출된 이미지(이 경우 `profile_image`라는 이름)를 업로드하려고 시도합니다.
- $error = array('error' => $this->upload->display_errors()); 업로드가 실패할 경우 오류 메시지를 설정합니다.
- $this->load->view('files/upload_form', $error); 파일 업로드 양식을 로드하고 업로드 라이브러리에서 반환된 오류 메시지를 표시합니다.
- $data = array('image_metadata' => $this->업로드->data()); 업로드가 성공한 경우 이미지 메타데이터를 설정합니다.
- $this->load->view('files/upload_result', $data); 업로드된 성공적 보기를 로드하고 업로드된 파일 메타데이터를 전달합니다.

컨트롤러 부분은 여기까지입니다. 이제 이미지를 업로드할 디렉토리를 만들어 보겠습니다. 애플리케이션의 루트 디렉토리에 "images"라는 새 디렉토리를 생성하세요.

마지막으로 routes.php 파일에 폼을 표시하고 결과를 표시하는 두 개의 경로를 추가하겠습니다.

application/config/routes.php 파일을 열고 다음 경로를 추가하세요.

$route['upload-image'] = 'imageuploadcontroller';
$route['store-image'] = 'imageuploadcontroller/store';

이리,

$route['upload-image'] = 'imageuploadcontroller';는 정의합니다. URL ImageUploadController의 index 메서드를 호출하는 upload-image
$route['store-image'] = 'imageuploadcontroller/store';는 다음을 정의합니다. URL 사용자가 선택한 파일을 서버에 업로드하는 store-image 함수입니다.

일반적인 문제를 해결하는 방법 CodeIgniter 파일 업로드 오류

대부분의 업로드 실패는 업로드 라이브러리에서 명확한 오류 메시지를 반환합니다. 아래 목록은 일반적인 오류와 해결 방법을 보여줍니다.

업로드하려는 파일 형식은 허용되지 않습니다. allowed_types 설정에 누락된 확장자를 추가하세요. 예를 들어 'gif|jpg|png|pdf'와 같이 입력합니다.
업로드하려는 파일의 크기가 허용된 크기를 초과합니다. max_size 값을 높이고, php.ini 파일의 upload_max_filesize 및 post_max_size 값이 충분히 큰지 확인하십시오.
업로드 경로가 유효하지 않은 것 같습니다. upload_path 디렉토리를 생성하고 웹 서버에 해당 디렉토리에 대한 쓰기 권한이 있는지 확인하십시오.
업로드할 파일을 선택하지 않았습니다. 입력 필드 이름이 do_upload() 인수와 일치하는지, 그리고 폼이 enctype multipart/form-data를 사용하는지 확인하십시오.

애플리케이션 테스트

내장 PHP 서버를 시작해 보겠습니다.

터미널 또는 명령 프롬프트를 열고 애플리케이션의 루트 디렉토리로 이동합니다. 제 경우에는 루트 디렉토리가 C:\Sites\ci-app 드라이브에 있습니다.

cd C:\Sites\ci-app

다음 명령어를 사용하여 서버를 시작하세요.

php -S localhost:3000

다음을 로드하세요 URL 웹 브라우저에서: http://localhost:3000/upload-image

다음과 같은 결과를 확인하실 수 있습니다.

파일 선택을 클릭하세요

다음과 유사한 대화 상자 창이 표시되어야 합니다.

원하는 이미지를 선택한 다음 열기를 클릭하세요.

선택한 파일 이름은 위 이미지와 같이 업로드 양식에 표시됩니다. '이미지 업로드' 버튼을 클릭하세요.

모든 것이 순조롭게 진행된다면 다음과 같은 결과를 얻게 될 것입니다.

'내 이미지 보기!' 링크를 클릭하세요.

업로드하신 이미지를 보실 수 있을 겁니다. 결과는 다음과 유사할 것입니다.

업로드된 이미지 이름이 표시되는 것을 확인하세요. URL이미지 이름은 업로드된 이미지의 메타데이터에서 가져왔습니다.

참고: 파일 업로드 절차는 다른 유형의 파일에 대해서도 동일합니다.

자주 묻는 질문

The CodeIgniter 3 업로드 라이브러리는 do_upload() 호출당 하나의 파일만 처리하므로, $_FILES를 순회하면서 각 항목에 대해 해당 함수를 호출해야 합니다. CodeIgniter 4는 getFileMultiple() 메서드를 통해 여러 파일을 직접 업로드하는 기능을 지원합니다.

그렇지 않습니다. CodeIgniter 4에서는 업로드 라이브러리가 요청 파일 API로 대체되었습니다. 이제 별도의 업로드 라이브러리를 로드하는 대신, `$this->request->getFile('field')`를 호출하여 유효성을 검사한 다음 `move()`를 사용하여 파일을 저장합니다.

각 파일에 임의의 이름을 지정하려면 `$config['encrypt_name']`을 `TRUE`로 설정하거나, 원하는 값으로 `$config['file_name']`을 설정하세요. 이렇게 하면 원래 이름이 같은 기존 파일을 덮어쓰는 것을 방지할 수 있습니다.

예. AI는 허용된 파일 유형 화이트리스트, 크기 제한, 오류 처리 등을 생성할 수 있으며, 실제 MIME 유형 확인과 같은 추가 검사도 제안할 수 있습니다. 배포 전에 생성된 규칙을 실제 파일로 반드시 테스트하십시오.

네. 오류 메시지와 컨트롤러 코드를 붙여넣어 주시면 AI가 멀티파트 폼 누락, 쓰기 권한이 없는 upload_path, allowed_types에 확장자가 누락된 경우와 같은 문제를 정확히 파악하고 해결 방법을 제시해 드립니다.

이미지 및 파일 업로드 방법 Code점화기 (예시 포함)

Code이그나이터 파일 업로드

이미지 업로드 Code이그나이터

일반적인 문제를 해결하는 방법 CodeIgniter 파일 업로드 오류

애플리케이션 테스트

자주 묻는 질문

이 게시물을 요약하면 다음과 같습니다.

뉴스레터 신청하기

Code이그나이터 파일 업로드

이미지 업로드 Code이그나이터

관련 기사

일반적인 문제를 해결하는 방법 CodeIgniter 파일 업로드 오류

애플리케이션 테스트

자주 묻는 질문

이 게시물을 요약하면 다음과 같습니다.

뉴스레터 신청하기