Mục lục

Hướng dẫn chi tiết cách sử dụng class Upload để tải file lên hệ thống

Class upload là lớp có chứa các chức năng tải file lên hệ thống. File tải lên có thể từ máy tính hoặc một file trên internet.

Một số lưu ý khi sử dụng upload các bạn xem tại video: https://www.youtube.com/watch?v=B-mMzpL8BLw

Chuẩn bị

  1. Cài đặt NukeViet 4.4.02 (link tải NukeViet 4.4.02) hoặc tương đương.
  2. Cài đặt module mẫu samples (nv4_module_samples.zip) để lập trình

Hướng dẫn lập trình

Tải file từ máy tính

Chuẩn bị một form để gửi file từ máy tính lên server:

Mở file themes/admin_default/modules/samples/main.tpl thêm vào đoạn HTML để tạo ra form gửi file lên máy tính, code html như sau

main.tpl
<!-- BEGIN: main -->
<form action="{NV_BASE_ADMINURL}index.php?{NV_LANG_VARIABLE}={NV_LANG_DATA}&amp;{NV_NAME_VARIABLE}={MODULE_NAME}&amp;{NV_OP_VARIABLE}={OP}" method="post" enctype="multipart/form-data">
    <div class="panel panel-default">
        <div class="panel-body">
            <div class="form-group">
                <label>File:</label>
                <input type="file" name="uploadfile">
            </div>
            <input class="btn btn-primary" name="submit" type="submit" value="{LANG.save}" />
        </div>
    </div>
</form>
<!-- END: main -->

Với file này ta sẽ có được một form upload file như ảnh

Lưu ý: Thẻ form cần có thuộc tính enctype=“multipart/form-data” mới có thể gửi file lên server.

Lập trình xử lý để lưu file gửi lên trên server

Trong file modules/samples/admin/main.php bên dưới đoạn 

//------------------------------
// Viết code xử lý chung vào đây
//------------------------------

Chúng ta bắt đầu lập trình:

Nhận diện được có file tải lên:

Dùng lệnh 

if ($nv_Request->isset_request('submit', 'post') and isset($_FILES, $_FILES['uploadfile'], $_FILES['uploadfile']['tmp_name']) and is_uploaded_file($_FILES['uploadfile']['tmp_name'])) {
    //
}

Trong đó:

Tiến hành lưu file tải lên:

Sau khi kiểm tra xong, tiến hành lưu file tải lên bằng các lệnh sau 

// Khởi tạo Class upload
$upload = new NukeViet\Files\Upload($admin_info['allow_files_type'], $global_config['forbid_extensions'], $global_config['forbid_mimes'], NV_UPLOAD_MAX_FILESIZE, NV_MAX_WIDTH, NV_MAX_HEIGHT);
 
// Thiết lập ngôn ngữ, nếu không có dòng này thì ngôn ngữ trả về toàn tiếng Anh
$upload->setLanguage($lang_global);
 
// Tải file lên server
$upload_info = $upload->save_file($_FILES['uploadfile'], NV_UPLOADS_REAL_DIR, false, $global_config['nv_auto_resize']);

Các tham số khởi tạo bao gồm:

Các tham số lưu file tải lên bao gồm:

Kết quả trả về trong ví dụ được lưu vào biến $upload_info, đây là mảng một chiều lưu trữ thông tin tải file lên.

Có 3 trường hợp:

1. Có lỗi, mảng này sẽ như sau 

Array
(
    [error] => Lỗi: loại file không được phép tải lên
)

2. Thành công, file tải lên là ảnh 

Array
(
    [error] => 
    [complete] => 1
    [name] => D:/webroot/www/nukeviet4/tmp2.nukeviet4.my/uploads/uq7c94b.jpg
    [basename] => uq7c94b.jpg
    [ext] => jpg
    [mime] => image/jpeg
    [size] => 40892
    [is_img] => 1
    [is_svg] => 
    [img_info] => Array
        (
            [0] => 720
            [1] => 720
            [2] => 2
            [3] => width="720" height="720"
            [bits] => 8
            [channels] => 3
            [mime] => image/jpeg
        )

)

3. Thành công, file tải lên là loại file khác 

Array
(
    [error] => 
    [complete] => 1
    [name] => D:/webroot/www/nukeviet4/tmp2.nukeviet4.my/uploads/nv4_module_samples.zip
    [basename] => nv4_module_samples.zip
    [ext] => zip
    [mime] => application/zip
    [size] => 19148
    [is_img] => 
    [is_svg] => 
)

Giải thích các giá trị:

Lập trình viên căn cứ vào biến $upload_info để xử lý cho ứng dụng của mình.

Tải file trên internet

Chuẩn bị form tải lên

Trong file tpl ở hướng dẫn bên trên bổ sung thêm một nút gửi file từ internet như sau: 

<div class="form-group">
    <label>Remote File:</label>
    <input type="text" class="form-control" name="remotefile">
</div>
<input class="btn btn-primary" name="submitremote" type="submit" value="{LANG.save}" />

Lập trình để tải file về

Trong file php như bên trên, dùng code nhận diện có thông tin gửi lên của người dùng ví dụ như sau: 

if ($nv_Request->isset_request('submitremote', 'post')) {
    $remotefile = $nv_Request->get_string('remotefile', 'post', '');
    if (!empty($remotefile)) {
        //
    }
}

Với code đó, nếu có thông tin gửi lên thì địa chỉ file ở biến $remotefile

Xử lý lưu file

Dùng đoạn code như sau: 

// Khởi tạo Class upload
$upload = new NukeViet\Files\Upload($admin_info['allow_files_type'], $global_config['forbid_extensions'], $global_config['forbid_mimes'], NV_UPLOAD_MAX_FILESIZE, NV_MAX_WIDTH, NV_MAX_HEIGHT);
 
// Thiết lập ngôn ngữ, nếu không có dòng này thì ngôn ngữ trả về toàn tiếng Anh
$upload->setLanguage($lang_global);
 
// Lưu file trên internet về server
$upload_info = $upload->save_urlfile($remotefile, NV_UPLOADS_REAL_DIR, false, $global_config['nv_auto_resize']);

Cách viết hoàn toàn tương tự như hướng dẫn lưu file từ máy tính bên trên, chỉ khác:

Kết quả trả về lưu vào biến $upload_info cũng có nội dung tương tự như cách lưu file từ máy tính bên trên.

Sử dụng module quản lý File

Khai báo html 

// thẻ input text đường dẫn file
<input class="w300 form-control pull-left" type="text" name="image" id="image" value="{DATA.image}" style="margin-right: 5px"/>
 
// thẻ input text tiêu đề file
<input class="w300 form-control" type="text" name="imagealt" id="imagealt" value="{DATA.imagealt}"/>
 
// button gọi tới module Quản lý file
<input type="button" value="Browse server" name="selectimg" class="btn btn-info"/>

Javascript gọi module quản lý file 

$("input[name=selectimg]").click(function() {
		var area = "image"; //id của thẻ input lưu đường dẫn file
		var alt = "imagealt"; //id của thẻ input lưu tiêu đề file
		var path = '{NV_UPLOADS_DIR}/{MODULE_UPLOAD}'; //uploads/sample
		var type = "image"; // kiểu định dạng cho phép upload
                var currentpath = '{NV_UPLOADS_DIR}/{MODULE_UPLOAD}/2020'; //uploads/sample/2020
 
		nv_open_browse(script_name + "?" + nv_name_variable + "=upload&popup=1&area=" + area + "&alt=" + alt + "&path=" + path + "&type=" + type + "&currentpath=" + currentpath, "NVImg", 850, 420, "resizable=no,scrollbars=no,toolbar=no,location=no,status=no");
 
		return false;
	});

Code mẫu

Tham khảo toàn bộ module trong hướng dẫn này tại đây nv4_module_samples_upload.zip