Πώς να ανεβάσετε εικόνα και αρχείο σε CodeΑνάφλεξη (με παράδειγμα)
Φιόνα Μπράουν
⚡ Έξυπνη Σύνοψη
CodeΤο Igniter File Upload χρησιμοποιεί την ενσωματωμένη βιβλιοθήκη Upload για να μετακινήσει εικόνες και έγγραφα από μια φόρμα HTML σε έναν κατάλογο διακομιστή. Αυτό το παράδειγμα δημιουργεί μια φόρμα μεταφόρτωσης, έναν ελεγκτή που επικυρώνει τον τύπο και το μέγεθος και μια σελίδα αποτελεσμάτων που επιβεβαιώνει τη μεταφόρτωση.
CodeΜεταφόρτωση αρχείου Igniter
Η διαχείριση αρχείων είναι απαραίτητη για τις περισσότερες εφαρμογές ιστού. Εάν είστε προγραμματιστήςping ένα σύστημα διαχείρισης περιεχομένου, τότε θα πρέπει να μπορείτε να ανεβάσετε εικόνες, έγγραφα word, αναφορές PDF και άλλα. Εάν εργάζεστε σε έναν ιστότοπο μελών, ίσως χρειαστεί να προβλέψετε ώστε οι χρήστες να ανεβάζουν τις εικόνες προφίλ τους. CodeΗ κλάση Igniter File Uploading μας διευκολύνει να κάνουμε όλα τα παραπάνω.
Σε αυτό το σεμινάριο, θα εξετάσουμε πώς να χρησιμοποιήσετε τη βιβλιοθήκη μεταφόρτωσης αρχείων για τη φόρτωση αρχείων.
Μεταφόρτωση εικόνων σε CodeIgniter
Μεταφόρτωση αρχείου σε CodeIgniter Έχει δύο κύρια μέρη: το frontend και το backend. Το frontend διαχειρίζεται η φόρμα HTML που χρησιμοποιεί το αρχείο τύπου εισόδου φόρμας. Στο backend, η βιβλιοθήκη μεταφόρτωσης αρχείων επεξεργάζεται τα δεδομένα εισόδου που υποβάλλονται από τη φόρμα και τα εγγράφει στον κατάλογο μεταφόρτωσης.
Ας ξεκινήσουμε με τη φόρμα εισαγωγής.
Δημιουργήστε έναν νέο κατάλογο με το όνομα files στον κατάλογο application/views.
Προσθέστε τα ακόλουθα αρχεία σε εφαρμογή/προβολές/αρχεία
- 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(0)?>" 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,000kb, κοντά στα 2MB. Εάν ο χρήστης προσπαθήσει να μεταφορτώσει ένα αρχείο μεγαλύτερο από 2,000kb, τότε η μεταφόρτωση της εικόνας θα αποτύχει και η βιβλιοθήκη θα επιστρέψει ένα μήνυμα σφάλματος.
- $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); φορτώνει την προβολή που μεταφορτώθηκε με επιτυχία και μεταβιβάζει τα μεταδεδομένα του μεταφορτωμένου αρχείου.
Αυτό είναι όλο για τον ελεγκτή. Ας δημιουργήσουμε τώρα τον κατάλογο στον οποίο θα μεταφορτωθούν οι εικόνες μας. Δημιουργήστε έναν νέο κατάλογο με τίτλο "images" στον ριζικό κατάλογο της εφαρμογής σας.
Τέλος, θα προσθέσουμε δύο διαδρομές στο αρχείο routes.php που θα εμφανίζουν τη φόρμα και τα αποτελέσματα.
Ανοίξτε το application/config/routes.php και προσθέστε τις ακόλουθες διαδρομές
$route['upload-image'] = 'imageuploadcontroller'; $route['store-image'] = 'imageuploadcontroller/store';
ΕΔΩ,
- $route['upload-image'] = 'imageuploadcontroller'; ορίζει το URL upload-image που καλεί τη μέθοδο index του ImageUploadController
- $route['store-image'] = 'imageuploadcontroller/store'; ορίζει το URL store-image που δέχεται το επιλεγμένο αρχείο χρήστη και το ανεβάζει στον διακομιστή.
Πώς να διορθώσετε το κοινό CodeΣφάλματα μεταφόρτωσης αρχείου Igniter
Οι περισσότερες αποτυχίες μεταφόρτωσης επιστρέφουν ένα σαφές μήνυμα από τη βιβλιοθήκη μεταφόρτωσης. Η παρακάτω λίστα αντιστοιχίζει τα συνηθισμένα σφάλματα στις διορθώσεις τους.
- Ο τύπος αρχείου που προσπαθείτε να ανεβάσετε δεν επιτρέπεται: Προσθέστε την επέκταση που λείπει στη διαμόρφωση allowed_types, για παράδειγμα 'gif|jpg|png|pdf'.
- Το αρχείο που προσπαθείτε να ανεβάσετε είναι μεγαλύτερο από το επιτρεπόμενο μέγεθος: raise max_size και επιβεβαιώστε ότι τα upload_max_filesize και post_max_size στο php.ini είναι αρκετά μεγάλα.
- Η διαδρομή μεταφόρτωσης δεν φαίνεται να είναι έγκυρη: δημιουργήστε τον κατάλογο upload_path και βεβαιωθείτε ότι ο διακομιστής ιστού έχει δικαιώματα εγγραφής σε αυτόν.
- Δεν επιλέξατε αρχείο για μεταφόρτωση: Ελέγξτε ότι το όνομα εισόδου ταιριάζει με το όρισμα do_upload() και ότι η φόρμα χρησιμοποιεί enctype multipart/form-data.
Δοκιμή της εφαρμογής
Ας ξεκινήσουμε τον ενσωματωμένο διακομιστή PHP.
Ανοίξτε το τερματικό ή τη γραμμή εντολών και μεταβείτε στη ρίζα της εφαρμογής σας. Στην περίπτωσή μου, η ρίζα βρίσκεται στη μονάδα δίσκου C:\Sites\ci-app.
cd C:\Sites\ci-app
Ξεκινήστε τον διακομιστή χρησιμοποιώντας την ακόλουθη εντολή
php -S localhost:3000
Φορτώστε τα ακόλουθα URL στο πρόγραμμα περιήγησής σας στο διαδίκτυο: http://localhost:3000/upload-image
Θα μπορείτε να δείτε τα ακόλουθα αποτελέσματα
Κάντε κλικ στην επιλογή αρχείου
Θα πρέπει να μπορείτε να δείτε ένα παράθυρο διαλόγου παρόμοιο με το παρακάτω
Επιλέξτε την εικόνα που θέλετε και, στη συνέχεια, κάντε κλικ στο άνοιγμα
Το επιλεγμένο όνομα αρχείου θα εμφανιστεί στη φόρμα μεταφόρτωσης όπως φαίνεται στην παραπάνω εικόνα. Κάντε κλικ στο κουμπί Μεταφόρτωση εικόνας.
Θα λάβετε τα ακόλουθα αποτελέσματα, υποθέτοντας ότι όλα πάνε καλά.
Κάντε κλικ στον σύνδεσμο Προβολή εικόνας μου!
Θα πρέπει να μπορείτε να δείτε την εικόνα που ανεβάσατε. Τα αποτελέσματα θα είναι παρόμοια με τα παρακάτω.
Παρατηρήστε ότι το όνομα της εικόνας που ανεβάσατε εμφανίζεται στο URLΛάβαμε το όνομα της εικόνας από τα μεταδεδομένα της μεταφορτωμένης εικόνας.
Σημείωση: Η διαδικασία μεταφόρτωσης αρχείων παραμένει η ίδια για άλλους τύπους αρχείων.
