Cách hiển thị hình ảnh đã tải lên trong PHP

Trong hướng dẫn nhanh này, chúng tôi thiết lập một biểu mẫu HTML cơ bản để tải lên hình ảnh bằng PHP, chúng tôi cũng khám phá cách bảo mật tập lệnh PHP của mình để tập lệnh không bị lạm dụng bởi những người dùng độc hại

Thiết lập biểu mẫu tải lên hình ảnh

Chúng tôi bắt đầu với một hình thức cơ bản

Biểu mẫu chứa nút gửi và có thuộc tính

<form action="upload.php" method="POST" enctype="multipart/form-data">
    <input type="file" name="image" accept="image/*" />
    <button type="submit">Uploadbutton>
form>

2. Thuộc tính hành động trỏ đến trang mà biểu mẫu sẽ đăng tất cả nội dung của nó lên khi nhấp vào nút gửi

<form action="upload.php" method="POST">
    <button type="submit">Uploadbutton>
form>

Biểu mẫu đăng lên một tệp PHP có tên là

<form action="upload.php" method="POST" enctype="multipart/form-data">
    <input type="file" name="image" accept="image/*" />
    <button type="submit">Uploadbutton>
form>

3. Tập tin này sẽ xử lý việc tải lên hình ảnh. Chúng tôi sẽ nhận được điều đó trong một phút

Để cho phép người dùng chọn tệp, chúng tôi thêm trường nhập tệp

<form action="upload.php" method="POST" enctype="multipart/form-data">
    <input type="file" name="image" accept="image/*" />
    <button type="submit">Uploadbutton>
form>

Đồng thời, chúng tôi cũng đã thêm thuộc tính biểu mẫu

<form action="upload.php" method="POST" enctype="multipart/form-data">
    <input type="file" name="image" accept="image/*" />
    <button type="submit">Uploadbutton>
form>

0 và đặt nó thành

<form action="upload.php" method="POST" enctype="multipart/form-data">
    <input type="file" name="image" accept="image/*" />
    <button type="submit">Uploadbutton>
form>

1. Điều này là cần thiết nếu chúng tôi có trường nhập tệp trong biểu mẫu của mình

Bởi vì chúng tôi chỉ tải lên hình ảnh, chúng tôi thêm thuộc tính

<form action="upload.php" method="POST" enctype="multipart/form-data">
    <input type="file" name="image" accept="image/*" />
    <button type="submit">Uploadbutton>
form>

2 vào phần tử đầu vào tệp và đặt nó thành

<form action="upload.php" method="POST" enctype="multipart/form-data">
    <input type="file" name="image" accept="image/*" />
    <button type="submit">Uploadbutton>
form>

3 để yêu cầu nó chỉ chấp nhận các tệp có kiểu bắt chước bắt đầu bằng

<form action="upload.php" method="POST" enctype="multipart/form-data">
    <input type="file" name="image" accept="image/*" />
    <button type="submit">Uploadbutton>
form>

4, như

<form action="upload.php" method="POST" enctype="multipart/form-data">
    <input type="file" name="image" accept="image/*" />
    <button type="submit">Uploadbutton>
form>

5 hoặc

<form action="upload.php" method="POST" enctype="multipart/form-data">
    <input type="file" name="image" accept="image/*" />
    <button type="submit">Uploadbutton>
form>

6

Hãy viết trình xử lý tải lên hình ảnh PHP tiếp theo

Xử lý tải lên hình ảnh PHP

Chúng tôi sẽ tạo một tệp mới có tên là

<form action="upload.php" method="POST" enctype="multipart/form-data">
    <input type="file" name="image" accept="image/*" />
    <button type="submit">Uploadbutton>
form>

3 trong cùng thư mục với trang chứa biểu mẫu của chúng tôi

Tiếp theo, chúng tôi tạo một thư mục có tên là

<form action="upload.php" method="POST" enctype="multipart/form-data">
    <input type="file" name="image" accept="image/*" />
    <button type="submit">Uploadbutton>
form>

8, cũng trong cùng một thư mục. Đây là nơi tập lệnh của chúng tôi sẽ lưu trữ các tệp hình ảnh đã tải lên bằng hàm

<form action="upload.php" method="POST" enctype="multipart/form-data">
    <input type="file" name="image" accept="image/*" />
    <button type="submit">Uploadbutton>
form>

9

<form action="upload.php" method="POST" enctype="multipart/form-data">
    <input type="file" name="image" accept="image/*" />
    <button type="submit">Uploadbutton>
form>

1

Đã được thực hiện. Đây là tất cả những gì cần thiết để làm cho nó hoạt động

Thật không may, không phải tất cả mọi người trên internet là một vị thánh. Tập lệnh của chúng tôi hiện cho phép mọi người tải lên bất kỳ thứ gì, đây là rủi ro bảo mật. Chúng tôi cần đảm bảo mọi người tải lên hình ảnh hợp lệ và không cố làm hại máy chủ của chúng tôi

Bảo mật quá trình tải lên hình ảnh

Chúng tôi sẽ đảm bảo thêm ba điều này theo thứ tự

• Các tập tin cần phải là một hình ảnh
• Tệp phải nhỏ hơn 5MB
• Tệp phải có tên hợp lệ

Đảm bảo tệp là một hình ảnh

Hãy bắt đầu bằng cách đảm bảo rằng tệp đã tải lên thực sự là một hình ảnh

Sử dụng

<form action="upload.php" method="POST" enctype="multipart/form-data">
    <input type="file" name="image" accept="image/*" />
    <button type="submit">Uploadbutton>
form>

10 chúng ta có thể lấy kiểu mô phỏng hình ảnh, hàm trả về

<form action="upload.php" method="POST" enctype="multipart/form-data">
    <input type="file" name="image" accept="image/*" />
    <button type="submit">Uploadbutton>
form>

11 khi tệp không phải là hình ảnh

<form action="upload.php" method="POST" enctype="multipart/form-data">
    <input type="file" name="image" accept="image/*" />
    <button type="submit">Uploadbutton>
form>

4

Tiếp theo, chúng tôi cần ngăn người dùng tải lên các tệp rất lớn

Giới hạn kích thước tệp

Trong ví dụ bên dưới, chúng tôi giới hạn kích thước tệp hình ảnh ở mức 5 MB, tất nhiên bạn có thể chọn giới hạn của riêng mình, nhưng ít nhất nên giới hạn nó ở một điểm nhất định để ngăn người dùng tải lên hàng gigabyte dữ liệu trong nỗ lực tấn công DoS

Trong thư mục của tập lệnh

<form action="upload.php" method="POST" enctype="multipart/form-data">
    <input type="file" name="image" accept="image/*" />
    <button type="submit">Uploadbutton>
form>

3, chúng tôi tạo một tệp

<form action="upload.php" method="POST" enctype="multipart/form-data">
    <input type="file" name="image" accept="image/*" />
    <button type="submit">Uploadbutton>
form>

13 và đặt nội dung của nó thành như sau

<form action="upload.php" method="POST" enctype="multipart/form-data">
    <input type="file" name="image" accept="image/*" />
    <button type="submit">Uploadbutton>
form>

6

<form action="upload.php" method="POST" enctype="multipart/form-data">
    <input type="file" name="image" accept="image/*" />
    <button type="submit">Uploadbutton>
form>

14 ngăn yêu cầu vượt quá 5 MB, lưu ý rằng yêu cầu này bao gồm các trường khác trong biểu mẫu

Bây giờ, hãy đảm bảo rằng người dùng không thể tải lên tệp 0 byte. Chúng tôi sử dụng

<form action="upload.php" method="POST" enctype="multipart/form-data">
    <input type="file" name="image" accept="image/*" />
    <button type="submit">Uploadbutton>
form>

15 để đọc kích thước tệp thực tế thay vì dựa vào

<form action="upload.php" method="POST" enctype="multipart/form-data">
    <input type="file" name="image" accept="image/*" />
    <button type="submit">Uploadbutton>
form>

16 được báo cáo bởi

<form action="upload.php" method="POST" enctype="multipart/form-data">
    <input type="file" name="image" accept="image/*" />
    <button type="submit">Uploadbutton>
form>

17 vì người dùng có thể sửa đổi

<form action="upload.php" method="POST" enctype="multipart/form-data">
    <input type="file" name="image" accept="image/*" />
    <button type="submit">Uploadbutton>
form>

1

Bây giờ hãy đảm bảo tên tệp của hình ảnh hợp lệ

Bảo vệ chống lại tên tệp độc hại

Các tác nhân độc hại có thể thử tải lên một hình ảnh có tên

<form action="upload.php" method="POST" enctype="multipart/form-data">
    <input type="file" name="image" accept="image/*" />
    <button type="submit">Uploadbutton>
form>

18, tập lệnh PHP của chúng tôi hiện sẽ lưu trữ “hình ảnh” này trong

<form action="upload.php" method="POST" enctype="multipart/form-data">
    <input type="file" name="image" accept="image/*" />
    <button type="submit">Uploadbutton>
form>

19 có thể ghi đè lên tệp

<form action="upload.php" method="POST" enctype="multipart/form-data">
    <input type="file" name="image" accept="image/*" />
    <button type="submit">Uploadbutton>
form>

40 của chính chúng tôi

Chúng tôi có thể cố gắng làm sạch tên tệp hình ảnh, nhưng cách tiếp cận an toàn hơn là tạo tên tệp của riêng chúng tôi

Chúng tôi sẽ tạo một số

<form action="upload.php" method="POST" enctype="multipart/form-data">
    <input type="file" name="image" accept="image/*" />
    <button type="submit">Uploadbutton>
form>

41 và sử dụng chúng làm tên cho hình ảnh của chúng tôi

<form action="upload.php" method="POST" enctype="multipart/form-data">
    <input type="file" name="image" accept="image/*" />
    <button type="submit">Uploadbutton>
form>

6

Bước cuối cùng của chúng tôi là ngăn không cho mã được thực thi trong thư mục

<form action="upload.php" method="POST" enctype="multipart/form-data">
    <input type="file" name="image" accept="image/*" />
    <button type="submit">Uploadbutton>
form>

42 của chúng tôi

Ngăn chặn thực thi mã trong thư mục hình ảnh

Trong thư mục

<form action="upload.php" method="POST" enctype="multipart/form-data">
    <input type="file" name="image" accept="image/*" />
    <button type="submit">Uploadbutton>
form>

42 của chúng tôi, chúng tôi tạo một tệp

<form action="upload.php" method="POST" enctype="multipart/form-data">
    <input type="file" name="image" accept="image/*" />
    <button type="submit">Uploadbutton>
form>

13 và đặt nội dung của nó thành như sau để ngăn mọi tệp PHP đã tải lên chạy

Điều này đảm bảo rằng mã PHP trong thư mục này sẽ không thực thi. Vì vậy, nếu ai đó vẫn quản lý để tải lên tệp PHP, chẳng hạn như tệp PHP được ngụy trang dưới dạng hình ảnh, tệp đó vẫn không chạy

<form action="upload.php" method="POST" enctype="multipart/form-data">
    <input type="file" name="image" accept="image/*" />
    <button type="submit">Uploadbutton>
form>

0

Quy trình tải tệp lên của chúng tôi hiện đã được bảo mật. 🎉

Phần kết luận

Chúng tôi đã viết một biểu mẫu cơ bản với phần tử nhập tệp, để xử lý việc tải lên, chúng tôi đã tạo một tệp PHP để di chuyển hình ảnh đã tải lên vào một thư mục trên máy chủ. Để đảm bảo quá trình tải lên, chúng tôi đảm bảo rằng tên tệp hợp lệ, kích thước tệp không quá cao và tệp được tải lên thực sự là một hình ảnh

Nếu bạn cũng đang tìm cách thêm chức năng chỉnh sửa hình ảnh vào trường tải tệp lên, bạn có thể sử dụng phần tử

<form action="upload.php" method="POST" enctype="multipart/form-data">
    <input type="file" name="image" accept="image/*" />
    <button type="submit">Uploadbutton>
form>

45. Thành phần web do Pintura hỗ trợ này sẽ tự động mở trình chỉnh sửa hình ảnh mạnh mẽ khi hình ảnh được thêm vào trường và cho phép người dùng của bạn chỉnh sửa hình ảnh trước khi tải lên

Làm cách nào để hiển thị hình ảnh được chọn bằng cách tải lên tệp trong php?

Làm cách nào để hiển thị hình ảnh đã tải lên trong HTML bằng php?

Làm cách nào để hiển thị tệp đã tải lên trong php?

Làm cách nào để hiển thị hình ảnh bằng php?