Bài 10: PHP trang tin tức - Các chức năng của hình ảnh admin

Mục lục:

           1. Khái quát.

​​​​​​           2. Tạo table hình ảnh và folder lưu trữ.

           3. Phân trang hình ảnh.

           4. Upload hình ảnh.

           5. Lời kết

CREATE TABLE `images` (

  `id_img` int(11) NOT NULL,

  `url` text COLLATE utf8_unicode_ci NOT NULL,

  `type` varchar(5) COLLATE utf8_unicode_ci NOT NULL,

  `size` int(11) NOT NULL,

  `date_uploaded` datetime NOT NULL

) ENGINE=InnoDB DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci;

ALTER TABLE `images`

  ADD PRIMARY KEY (`id_img`);

ALTER TABLE `images`

  MODIFY `id_img` int(11) NOT NULL AUTO_INCREMENT;

<?php

// Nếu đăng nhập

if ($user)

{

    echo '<h3>Hình ảnh</h3>';

    // Lấy tham số ac

    if (isset($_GET['ac']))

    {

        $ac = trim(addslashes(htmlspecialchars($_GET['ac'])));

    }

    else

    {

        $ac = '';

    }

    // Nếu có tham số ac

    if ($ac != '')

    {

        // Trang upload hình ảnh

        if ($ac == 'add')

        {

            // Dãy nút của upload hình ảnh

            echo

            '

                <a href="' . $_DOMAIN . 'photos" class="btn btn-default">

                    <span class="glyphicon glyphicon-arrow-left"></span> Trở về

                </a>

            ';

            // Content upload hình ảnh

        }

    }

    // Ngược lại không có tham số ac

    // Trang danh sách hình ảnh

    else

    {

        // Dãy nút của danh sách hình ảnh

        echo

        '

            <a href="' . $_DOMAIN . 'photos/add" class="btn btn-default">

                <span class="glyphicon glyphicon-plus"></span> Thêm

            </a>

            <a href="' . $_DOMAIN . 'photos" class="btn btn-default">

                <span class="glyphicon glyphicon-repeat"></span> Reload

            </a>

            <a class="btn btn-danger" id="del_img_list">

                <span class="glyphicon glyphicon-trash"></span> Xoá

            </a>

        ';

        // Content danh sách hình ảnh

    }

}

// Ngược lại chưa đăng nhập

else

{

    new Redirect($_DOMAIN); // Trở về trang index

}

?>

echoa

'

    <p class="form-up-img">

        <div class="alert alert-info">Mỗi lần upload tối đa 20 file ảnh. Mỗi file có dung lượng không vượt quá 5MB và có đuôi định dạng là .jpg, .png.gif., </div>

        <form action="' . $_DOMAIN . 'photos.php"method="POST" id="formUpImg" enctype="multipart/form-data" onsubmit="return false;">

            <div class="form-group">

                <label>Chọn hình ảnh</label>

                <input type="file" class="form-control" accept="image/*" name="img_up[]" multiple="true" id="img_up" onchange="preUpImg();">

            </div>

            <div class="form-group box-pre-img hidden">

                <p><strong>Ảnh xem trước</strong></p>

            </div>

            <div class="form-group hidden box-progress-bar">

                <div class="progress">

                    <div class="progress-bar" role="progressbar"></div>

                </div>

            </div>

            <div class="form-group">

                <button type="submit" class="btn btn-primary">Upload</button>

                <button class="btn btn-default" type="reset">Chọn lại</button>

            </div>

            <div class="alert alert-danger hidden"></div>

        </form>

    </p>

';

// Xem ảnh trước

function preUpImg() {

    img_up = $('#img_up').val();

    count_img_up = $('#img_up').get(0).files.length;

    $('#formUpImg .box-pre-img').html('<p><strong>Ảnh xem trước</strong></p>');

    $('#formUpImg .box-pre-img').removeClass('hidden');

    // Nếu đã chọn ảnh

    if (img_up != '')

    {

        $('#formUpImg .box-pre-img').html('<p><strong>Ảnh xem trước</strong></p>');

        $('#formUpImg .box-pre-img').removeClass('hidden');

        for (i = 0; i <= count_img_up - 1; i++)

        {

            $('#formUpImg .box-pre-img').append('<img src="' + URL.createObjectURL(event.target.files[i]) + '" style="border: 1px solid #ddd;                    width: 50px; height: 50px; margin-right: 5px; margin-bottom: 5px;"/>');

        }

    }

    // Ngược lại chưa chọn ảnh

    else

    {

        $('#formUpImg .box-pre-img').html('');

        $('#formUpImg .box-pre-img').addClass('hidden');

    }

}

// Nút reset form  hình ảnh

$('#formUpImg button[type=reset]').on('click', function() {

    $('#formUpImg .box-pre-img').html('');

    $('#formUpImg .box-pre-img').addClass('hidden');

});

// Upload hình ảnh

$('#formUpImg').submit(function(e) {

    img_up = $('#img_up').val();

    count_img_up = $('#img_up').get(0).files.length;

    error_size_img = 0;

    error_type_img = 0;

    $('#formUpImg button[type=submit]').html('Đang tải ...');

    // Nếu có chọn ảnh

    if (img_up) {

        e.preventDefault();

        // Kiểm tra dung lượng ảnh

        for (i = 0; i <= count_img_up - 1; i++)

        {

            size_img_up = $('#img_up')[0].files[i].size;

            if (size_img_up > 5242880) { // 5242880 byte = 5MB

                error_size_img += 1; // Lỗi

            } else {

                error_size_img += 0; // Không lỗi

            }

        }

        // Kiểm tra định dạng ảnh

        for (i = 0; i <= count_img_up - 1; i++)

        {

            type_img_up = $('#img_up')[0].files[i].type;

            if (type_img_up == 'image/jpeg' || type_img_up == 'image/png' || type_img_up == 'image/gif') {

                error_type_img += 0;

            } else {

                error_type_img += 1;

            }

        }

        // Nếu lỗi về size ảnh

        if (error_size_img >= 1) {

            $('#formUpImg button[type=submit]').html('Upload');

            $('#formUpImg .alert').removeClass('hidden');

            $('#formUpImg .alert').html('Một trong các tệp đã chọn có dung lượng lớn hơn mức cho phép.');

        // Nếu số lượng ảnh vượt quá 20 file

        } else if (count_img_up > 20) {

            $('#formUpImg button[type=submit]').html('Upload');

            $('#formUpImg .alert').removeClass('hidden');

            $('#formUpImg .alert').html('Số file upload cho mỗi lần vượt quá mức cho phép.');

        } else if (error_type_img >= 1) {

            $('#formUpImg button[type=submit]').html('Upload');

            $('#formUpImg .alert').removeClass('hidden');

            $('#formUpImg .alert').html('Một trong những file ảnh không đúng định dạng cho phép.');

        } else {

            $(this).ajaxSubmit({

                beforeSubmit: function() {

                    target:   '#formUpImg .alert',

                    $("#formUpImg .box-progress-bar").removeClass('hidden');

                    $("#formUpImg .progress-bar").width('0%');

                },

                uploadProgress: function (event, position, total, percentComplete){

                    $("#formUpImg .progress-bar").animate({width: percentComplete + '%'});

                    $("#formUpImg .progress-bar").html(percentComplete + '%');

                },

                success: function (data) {    

                    $('#formUpImg button[type=submit]').html('Upload');

                    $('#formUpImg .alert').attr('class', 'alert alert-success');

                    $('#formUpImg .alert').html(data);

                },

                error: function() {

                    $('#formUpImg button[type=submit]').html('Upload');

                    $('#formUpImg .alert').removeClass('hidden'); 

                    $('#formUpImg .alert').html('Không thể upload hình ảnh vào lúc này, hãy thử lại sau.');

                },

                resetForm: true

            });

            return false;

        }

    // Ngược lại không chọn ảnh

    } else {

        $('#formUpImg button[type=submit]').html('Upload');

        $('#formUpImg .alert').removeClass('hidden');

        $('#formUpImg .alert').html('Vui lòng chọn tệp hình ảnh.');

    }

});

<?php

// Kết nối database và thông tin chung

require_once 'core/init.php';

// Nếu đăng nhập

if ($user)

{

    // Nếu có file upload

    if (isset($_FILES['img_up']))

    {

        foreach($_FILES['img_up']['name'] as $name => $value)

        {

            $dir = "../upload/";

            $name_img = stripslashes($_FILES['img_up']['name'][$name]);

            $source_img = $_FILES['img_up']['tmp_name'][$name];

            // Lấy ngày, tháng, năm hiện tại

            $day_current = substr($date_current, 8, 2);

            $month_current = substr($date_current, 5, 2);

            $year_current = substr($date_current, 0, 4);

            // Tạo folder năm hiện tại

            if (!is_dir($dir.$year_current))

            {

                mkdir($dir.$year_current.'/');

            }

            // Tạo folder tháng hiện tại

            if (!is_dir($dir.$year_current.'/'.$month_current))

            {

                mkdir($dir.$year_current.'/'.$month_current.'/');

            }  

            // Tạo folder ngày hiện tại

            if (!is_dir($dir.$year_current.'/'.$month_current.'/'.$day_current))

            {

                mkdir($dir.$year_current.'/'.$month_current.'/'.$day_current.'/');

            }

            $path_img = $dir.$year_current.'/'.$month_current.'/'.$day_current.'/'.$name_img; // Đường dẫn thư mục chứa file

            move_uploaded_file($source_img, $path_img); // Upload file

            $type_img = array_pop(split("\.", $name_img)); // Loại file

            $url_img = substr($path_img, 3); // Đường dẫn file

            $size_img = $_FILES['img_up']['size'][$name]; // Dung lượng file

            // Thêm dữ liệu vào table

            $sql_up_file = "INSERT INTO images VALUES (

                '',

                '$url_img',

                '$type_img',

                '$size_img',

                '$date_current'

            )";

            $db->query($sql_up_file);

        }

        echo 'Upload thành công.';

        $db->close();

        new Redirect($_DOMAIN.'photos');

    }

    // Nếu tồn tại POST action

}

// Ngược lại chưa đăng nhập

else

{

    new Redirect($_DOMAIN); // Trở về trang index

}

?>