CodeIgniter에서 이미지 및 파일을 업로드하는 방법(예제 포함)

CodeIgniter 파일 업로드

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

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

CodeIgniter에 이미지 업로드

파일 업로드 위치 CodeIgniter 두 가지 주요 부분이 있습니다. 프런트엔드와 백엔드. 프런트엔드는 양식 입력 유형 파일을 사용하는 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('store-image')?>" 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)){…}는 오류 변수가 설정되었는지 확인합니다. 결과가 참이면 업로드 라이브러리에서 반환된 오류가 사용자에게 표시됩니다.
유형 파일을 사용하면 사용자가 자신의 컴퓨터를 탐색하고 업로드할 파일을 선택할 수 있습니다.

다음 코드를 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,000MB에 가까운 2kb입니다. 사용자가 2,000kb보다 큰 파일을 업로드하려고 하면 이미지 업로드가 실패하고 라이브러리에서 오류 메시지를 반환합니다.
$config['max_width'] = 1500; 우리의 경우 이미지의 최대 너비를 1,500px로 설정합니다. 너비가 그보다 크면 오류가 발생합니다.
$config['max_height'] = 1500; 최대 허용 높이를 정의합니다.
$this->load->library('업로드', $config); 업로드 라이브러리를 로드하고 위에서 정의한 $config 배열로 초기화합니다.
if (!$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 파일에 두 개의 경로를 추가합니다.

Open application/config/routes.php
Add the following routes
$route['upload-image'] = 'imageuploadcontroller';
$route['store-image'] = 'imageuploadcontroller/store';

이리,

$route['upload-image'] = 'imageuploadcontroller'; ImageUploadController의 인덱스 메소드를 호출하는 URL 업로드 이미지를 정의합니다.
$route['store-image'] = 'imageuploadcontroller/store'; 선택한 사용자 파일을 수락하고 서버에 업로드하는 URL 저장소 이미지를 정의합니다.

애플리케이션 테스트

내장된 PHP 서버를 시작해보자

터미널/명령줄을 열고 애플리케이션의 루트를 찾습니다. 제 경우 루트는 C:\Sites\ci-app 드라이브에 있습니다.

cd C:\Sites\ci-app

다음 명령을 사용하여 서버를 시작합니다.

php -S localhost:3000

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

당신은 다음과 같은 결과를 볼 수 있을 것입니다

파일 선택을 클릭하세요

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

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

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

모든 것이 잘 진행된다면 다음과 같은 결과가 나올 것입니다.

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

업로드한 이미지를 볼 수 있어야 합니다. 결과는 다음과 유사합니다.

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

참고: 파일 업로드 프로세스는 다른 유형의 파일에도 동일하게 유지됩니다.

당신은 좋아할 것입니다 :

CodeIgniter 파일 업로드

CodeIgniter에 이미지 업로드

애플리케이션 테스트

관련 기사