Πώς να ανεβάσετε εικόνα και αρχείο στο CodeIgniter (με Παράδειγμα)
Φιόνα Μπράουν
Μεταφόρτωση αρχείου CodeIgniter
Η διαχείριση αρχείων είναι απαραίτητη για τις περισσότερες εφαρμογές web. Εάν αναπτύσσετε ένα σύστημα διαχείρισης περιεχομένου, τότε θα πρέπει να μπορείτε να ανεβάζετε εικόνες, έγγραφα word, αναφορές pdf κ.λπ. εικόνες. Η τάξη File Uploading του CodeIgniter μας διευκολύνει να κάνουμε όλα τα παραπάνω.
Σε αυτό το σεμινάριο, θα εξετάσουμε πώς να χρησιμοποιήσετε τη βιβλιοθήκη μεταφόρτωσης αρχείων για τη φόρτωση αρχείων.
Μεταφόρτωση εικόνων στο CodeIgniter
Μεταφόρτωση αρχείου σε CodeIgniter έχει δύο κύρια μέρη. Το frontend και το backend. Ο χειρισμός της διεπαφής γίνεται από τη φόρμα HTML που χρησιμοποιεί το αρχείο τύπου εισαγωγής φόρμας. Στο backend, η βιβλιοθήκη μεταφόρτωσης αρχείων επεξεργάζεται την υποβληθείσα είσοδο από τη φόρμα και την εγγράφει στον κατάλογο μεταφόρτωσης.
Ας ξεκινήσουμε με τη φόρμα εισαγωγής.
Δημιουργήστε έναν νέο κατάλογο που ονομάζεται αρχεία στον κατάλογο εφαρμογών/προβολών
Προσθέστε τα ακόλουθα αρχεία σε εφαρμογή/προβολές/αρχεία
- 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
- δημόσια συνάρτηση __construct() {…} προετοιμάζει τη μέθοδο γονικού κατασκευαστή και φορτώνει το url και τους βοηθούς φορμών
- δημόσια συνάρτηση index() {…} ορίζει τη μέθοδο ευρετηρίου που χρησιμοποιείται για την εμφάνιση της φόρμας αποστολής εικόνας
- δημόσια συνάρτηση store() {…} ορίζει τη μέθοδο που θα ανεβάσει την εικόνα και θα την αποθηκεύσει στον διακομιστή εφαρμογών Ιστού.
- $config['upload_path'] = './images/'; ορίζει τον κατάλογο στον οποίο θα πρέπει να ανεβαίνουν οι εικόνες
- $config['allowed_types'] = 'gif|jpg|png'; ορίζει τις αποδεκτές επεκτάσεις αρχείων. Αυτό είναι σημαντικό για λόγους ασφαλείας. Οι επιτρεπόμενοι τύποι διασφαλίζουν ότι μεταφορτώνονται μόνο εικόνες και δεν μπορούν να μεταφορτωθούν άλλοι τύποι αρχείων, όπως το php, επειδή έχουν τη δυνατότητα να θέσουν σε κίνδυνο τον διακομιστή.
- $config['max_size'] = 2000; ορίστε το μέγιστο μέγεθος αρχείου σε kilobyte. Στο παράδειγμά μας, το μέγιστο αρχείο που μπορεί να μεταφορτωθεί είναι 2,000 kb κοντά στα 2 MB. Εάν ο χρήστης προσπαθήσει να ανεβάσει ένα αρχείο μεγαλύτερο από 2,000 kb, τότε η μεταφόρτωση της εικόνας θα αποτύχει και η βιβλιοθήκη θα εμφανίσει μήνυμα σφάλματος.
- $config['max_width'] = 1500; ορίζει το μέγιστο πλάτος της εικόνας που στην περίπτωσή μας είναι 1,500 px. Οποιοδήποτε πλάτος μεγαλύτερο από αυτό οδηγεί σε σφάλμα
- $config['max_height'] = 1500; ορίζει το μέγιστο αποδεκτό ύψος.
- $this->load->library('upload', $config); φορτώνει τη βιβλιοθήκη μεταφόρτωσης και την προετοιμάζει με τον πίνακα $config που ορίσαμε παραπάνω.
- εάν (!$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->upload->data()); ορίζει τα μεταδεδομένα εικόνας εάν η μεταφόρτωση ήταν επιτυχής
- $this->load->view('files/upload_result', $data); φορτώνει την προβολή που μεταφορτώθηκε με επιτυχία και μεταβιβάζει τα μεταδεδομένα του μεταφορτωμένου αρχείου.
Αυτό είναι για τον ελεγκτή. Ας δημιουργήσουμε τώρα τον κατάλογο στον οποίο θα ανεβαίνουν οι εικόνες μας. Δημιουργήστε έναν νέο κατάλογο «εικόνες» στον ριζικό κατάλογο της εφαρμογής σας
Τέλος, θα προσθέσουμε δύο διαδρομές στο αρχείο routes.php που θα εμφανίζει τη φόρμα και θα εμφανίζει τα αποτελέσματα
Open application/config/routes.php Add the following routes $route['upload-image'] = 'imageuploadcontroller'; $route['store-image'] = 'imageuploadcontroller/store';
ΕΔΩ,
- $route['upload-image'] = 'imageuploadcontroller'; ορίζει τη διεύθυνση URL μεταφόρτωσης εικόνας που καλεί τη μέθοδο ευρετηρίου του ImageUploadController
- $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
θα μπορείτε να δείτε τα παρακάτω αποτελέσματα
Κάντε κλικ στην επιλογή αρχείου
Θα πρέπει να μπορείτε να δείτε ένα παράθυρο διαλόγου παρόμοιο με το παρακάτω
Επιλέξτε την εικόνα που θέλετε και κάντε κλικ στο άνοιγμα
Το επιλεγμένο όνομα αρχείου θα εμφανιστεί στη φόρμα μεταφόρτωσης όπως φαίνεται στην παραπάνω εικόνα. Κάντε κλικ στο κουμπί μεταφόρτωσης εικόνας
Θα λάβετε τα ακόλουθα αποτελέσματα με την προϋπόθεση ότι όλα πάνε καλά
Κάντε κλικ στο View My Image! Σύνδεσμος
Θα πρέπει να μπορείτε να δείτε την εικόνα που ανεβάσατε. Τα αποτελέσματα θα είναι παρόμοια με τα παρακάτω
Το όνομα της μεταφορτωμένης εικόνας ειδοποίησης εμφανίζεται στη διεύθυνση URL. Λάβαμε το όνομα της εικόνας από τα μεταδεδομένα εικόνας που ανεβάσατε
Σημείωση: Η διαδικασία αποστολής αρχείων παραμένει η ίδια για άλλους τύπους αρχείων
