Hướng dẫn dùng image uploader trong PHP

Với mọi trang web đều phải có chức năng upload image lên đưa Database với mục đích thêm hình ảnh vào cơ sở dữ liệu MySQL. Bài viết này sẽ hướng dẫn bạn cách upload ảnh bằng PHP và MySQL với những đoạn code dễ hiểu đọc xong bạn hoàn toàn có thể làm được.

Nội dung chính Show

Tổng quan về kỹ thuật Upload file trong PHP
Tạo form HTML upload file
Code PHP xử lý Upload File
Code PHP Upload nhiều File

Readmore : Code hiển thị nội dung bài viết trong PHP

Với bài tập này bạn sẽ biết cách lưu đường dẫn ảnh vào Database và hiển thị bức ảnh lên trên website. Nào hãy bắt đầu thôi!

Bước 1: Bạn sẽ khởi tạo 4 file như trong hình

photo: dùng để lưu hình ảnh trên máy tính
connect.php; kết nối tới Database
style; thêm CSS để trang trí form
upload.php; file upload ảnh
xuly.php; xử lý ảnh sau khi upload

Tạo 1 cơ sở dữ liệu Database tên là ‘upload_image‘ => sau đó tạo bảng Table tên là images bằng paste đoạn MySQL vào Database

CREATE TABLE IF NOT EXISTS `images` (
`id` int(11) NOT NULL AUTO_INCREMENT,
`image` varchar(100) NOT NULL,
PRIMARY KEY (`id`)
) ENGINE=MyISAM DEFAULT CHARSET=utf8 AUTO_INCREMENT=1 ;

Bước 2: Tiếp theo bạn sẽ tạo một file upload.php

 
 
 
Image Upload

Bước 3: Tiếp theo sẽ tạo một file là xuly.php

 2097152) {
$errors[]='Kích thước file không được lớn hơn 2MB';
}
$image = $_FILES['image']['name'];
$target = "photo/".basename($image);
$sql = "INSERT INTO images (image) VALUES ('$image')";
mysqli_query($conn, $sql);
if (move_uploaded_file($_FILES['image']['tmp_name'], $target)) {
echo '';
}else{
echo '';
}
}
$result = mysqli_query($conn, "SELECT * FROM images");
?>



Image Upload




   
";
echo "";
echo "";
}
?>

Bước 4: Tạo file connect.php để kết nối database

Bước 5: Thêm file style.css

#content{
margin: 20px auto;
border: 1px solid #cbcbcb;
overflow: auto;
padding: 20px;
}
form{
margin: 20px auto;
}
form div{
margin-top: 5px;
}
#img_div{
padding: 5px;
border: 1px solid #cbcbcb;
float: left
}
#img_div:after{
content: "";
display: block;
clear: both;
}
#img_div img{
float: left;
margin: 5px;
width: 400px;
height: auto;
}

Sau khi tạo xong 4 file: thư mục photo trong máy tính, upload.php, xuly.php và connect.php, style.css bạn thử chạy vào xem kết quả như thế nào.

Kết luận: Trên đây là code upload hình ảnh lên Database bằng PHP và MySQL, với bài hướng dẫn với các bước đơn giản trên hi vọng sẽ giúp bạn học thêm một chút kiến thức về lập trình PHP.

Đọc thêm: Cách lấy dữ liệu trong MySQL

Tổng quan về kỹ thuật Upload file PHP
Tạo form HTML file
Code Php xử lý upload
Code Php xử lý upload nhiều file

Tổng quan về kỹ thuật Upload file trong PHP

Để HTML FORM có thể gửi file lên server (http server) thì form phải có thuộc tính enctype="multipart/form-data", phần tử trong form để chọn và gửi file có dạng (tức là dùng phần tử input với thuộc tính type="file"). Cấu trúc tóm tắt là:

Khi file Upload lên Server (chạy PHP) thì file sẽ lưu vào một thư mục tạm (temporary directory, như trên Linux đó là /tmp) của hệ thống PHP, và toàn bộ thông tin về file upload sẽ lưu trong biến mảng toàn cục $_FILES

Chúng ta cần đọc thông tin từ $_FILES để nhanh chóng di chuyển file được upload vào thư mục tạm vào một nơi lưu trữ lâu dài (nếu không xử lý gì, thì sau một khoảng thời gian file này bị xóa).

Mảng biến $_FILES khi var_dump có cấu trúc dạng như sau:

array (size=1)
    'myfile' =>
        array (size=5)
            'name' => string 'somefile.txt' (length=12)
            'type' => string 'text/plain' (length=10)
            'tmp_name' => string '/tmp/phpDC66.tmp' (length=16)
            'error' => int 0
            'size' => int 18

Các thành phần đó là:

myfile : chỉ số mảng tương ứng với tên phần tử input, upload file.
name : tên gốc (ban đầu) của file.
type : kiểu file (tùy phần mở rộng có thể là text/plain, image/jpg, image/png ...)
tmp_name : nơi lưu tạm file upload lên, nếu muốn di chuyển nó ra khỏi thư mục tạm dùng hàm move_uploaded_file.
error : mã lỗi, nếu mã này bằng 0 là không lỗi.
size : cỡ file (byte).

Bằng việc đọc $_FILES bạn sẽ biết các thông tin về file được upload, nơi file đang lưu tạm, bạn cần phải xử lý bằng các hàm PHP để di chuyển file ra một vị trí theo cấu trúc thư mục của ứng dụng.

Nếu sau khi upload vào thư mục tạm một thời gian (như trên là /tmp/) một thời gian (do cấu hình hệ thống) mà bạn không di chuyển nó đến vị trí thích hợp, nó sẽ tự xóa.

Tạo form HTML upload file

Để thực hành upload file trong PHP, trước tiên tạo form cho phép người dùng chọn file và gửi file đó lên server. Giả sử code PHP để xử lý upload các file hình ảnh nằm ở /upload.php thì bạn có thể xây dựng form như sau:

Có thể tạo file upload.html


    Chọn file để upload:

Hiện thị form có dạng:

Lưu ý khi tạo form để uplad ảnh (file) thì cần thiết đặt thuộc tính form có:
method="post" enctype="multipart/form-data"
Phần tử chọn file trong form là input với kiểu type="file".
Tên phần tử là fileupload

Code PHP xử lý Upload File

Code xử lý upload sau là xử lý chỉ cho upload các file ảnh, với các loại file là jpg, png, jpeg, gif. File Upload file có cỡ < 0.8 MB. File Upload sẽ lưu vào thư mục uploads

Code xử lý upload file để trong file upload.php có nội dung như sau:

 $maxfilesize)
  {
      echo "Không được upload ảnh lớn hơn $maxfilesize (bytes).";
      $allowUpload = false;
  }


  // Kiểm tra kiểu file
  if (!in_array($imageFileType,$allowtypes ))
  {
      echo "Chỉ được upload các định dạng JPG, PNG, JPEG, GIF";
      $allowUpload = false;
  }


  if ($allowUpload)
  {
      // Xử lý di chuyển file tạm ra thư mục cần lưu trữ, dùng hàm move_uploaded_file
      if (move_uploaded_file($_FILES["fileupload"]["tmp_name"], $target_file))
      {
          echo "File ". basename( $_FILES["fileupload"]["name"]).
          " Đã upload thành công.";

          echo "File lưu tại " . $target_file;

      }
      else
      {
          echo "Có lỗi xảy ra khi upload file.";
      }
  }
  else
  {
      echo "Không upload được file, có thể do file lớn, kiểu file không đúng ...";
  }
?>

Giải thích code trên:

Các file mà form HTML upload nên, được PHP lưu ở một thư mục tạm hệ thống, và tất cả các thông tin về file được lưu ở biến mảng $_FILE, cấu trúc biến này như sau:

$_FILE = Array
    (
        [file1] => Array
            (
                [name] => 'test2.txt';//một tên file người dùng upload
                [type] => text/plain  (kiểu nội dung file text)
                [tmp_name] => /tmp/php/php1h4j1 //vị trí lưu file tạm thời trên server.
                [error] => UPLOAD_ERR_OK (= 0 là không lỗi)
                [size] => 123   (kích thước file - bype)
            )

        [file2] => Array
            (
                [name] => test.jpg
                [type] => image/jpeg
                [tmp_name] => /tmp/php/php6hst32
                [error] => UPLOAD_ERR_OK
                [size] => 98174
            )
    )

file1, file2 ... tên key tương ứng với tên phần tử form upload file, ví dụ trên là fileupload

Như vậy khi xủ lý upload file, bạn truy cập vào $_FILE và di chuyển file vừa upload từ tmp_name sang vị trí mới bạn muốn lưu $target_file bằng hàm move_uploaded_file($_FILES["fileupload"]["tmp_name"],$target_file )

Kiểm tra file upload có phải là file ảnh (dùng cho trường hợp bạn chỉ cho phép up ảnh) thì đầu tiên gọi getimagesize() để xem kích thước ảnh, nếu hàm phân tích được có nghĩa là ảnh, ngược lại là một loại file khác.

Kiểm tra phần mở rộng của tên file: Lấy phần mở rộng $imageFileType = pathinfo($target_file,PATHINFO_EXTENSION); rồi so sánh với các mẫu cho phép.

NHANH CHÓNG CHẠY THỬ CODE TRÊN

Bạn có thể tạo ra một thư mục đặt tên uploadfile, để trong đó 2 file upload.html và upload.php ở trên, trong thư mục này tạo thư mục con uploads để lưu file - cấu trúc này như tại đây: uploadfile

Sau đó vào thư mục uploadfile và gõ lệnh chạy Server HTTP của PHP

php -S 0.0.0.0:8088 -t uploadfile/

Từ trình duyệt truy cập http://localhost:8088/upload.html để chạy thử

Code PHP Upload nhiều File

Trong thẻ nếu có thuộc tính multiple="multiple" và tên phần tử chỉ ra là mảng, thì cho phép chọn một lúc nhiều file để upload.

Ví dụ HTML như sau:

Lúc này tại PHP $_FILES['fileupload'] mỗi thành phần sau đều là mảng chứa số lượng tương ứng của file upload

$_FILES['fileupload']['name'] chứa các tên file upload (up 3 file thì là mảng 3 phần tử các tên)
$_FILES['fileupload']['type'] các kiểu file
$_FILES['fileupload']['tmp_name'] chứa các vị trí lưu tạm file
$_FILES['fileupload']['error'] mảng báo lỗi
$_FILES['fileupload']['size'] các kích thước file

Đoạn code sau hiện thị FORM để bạn chọn một lúc nhiều file upload, sau đó code PHP sẽ hiện thị các thông tin về các file mà bạn upload lên. Hãy chạy và chọn thử nhiều file upload để kiểm tra

File upload-multi.php

";
                echo "Tên file: $names[$i] 
";
                echo "Lưu tại: $tmp_names[$i] 
";
                echo "Cỡ file: $sizes[$i] 
";

                //Code xử lý di chuyển file đến thư mục cần thiết ở đây (bạn tự thực hiện)
                //Ví dụ move_uploaded_file($tmp_names[$i], /upload/'.$names[$i]);

            }
        }
        echo "Tổng số file upload: " .$numfiles;
}
?>


    Chọn file để upload:
      (Cỡ lớn nhất mà PHP đang cấu hình cho phép upload là
      )

Source code: uploadfile (Git), hoặc tải rphp-uploadfile

Chạy thử bằng cách để file này vào thư mục uploadfile như trên, và truy cập: http://localhost:8088/upload-multi.php để kiểm tra

Hướng dẫn dùng image uploader trong PHP

Tổng quan về kỹ thuật Upload file trong PHP

Tạo form HTML upload file

Code PHP xử lý Upload File

Code PHP Upload nhiều File

Bài Viết Liên Quan

Quảng Cáo

Có thể bạn quan tâm

Toplist được quan tâm

Quảng cáo

Xem Nhiều

Quảng cáo

Chúng tôi

Điều khoản

Trợ giúp

Mạng xã hội