Με την php μπορoύμε να επικοινωνούμε με τον server και να ανεβάζουμε (upload) αρχεία σε αυτόν.
Σε αυτό το tutorial θα ανεβάσουμε μια φωτό στον server, και θα επικυρώσουμε (validate) αν η φωτό είναι έγκυρη.
- Ενα αρχείο index.php όπου θα έχουμε την html φόρμα μας
- Ενα αρχείο script.php όπου θα έχουμε τον php κώδικα
- Ενα αρχείο style.css για να δώσουμε και εμφάνιση στην html
- Εναν φάκελο uploads για να τα αρχεία που θα ανεβάζουμε
index.php Εδω εχουμε τον html κώδικα
<!-- Στην αρχή του index.php θα συμπεριλάβουμε το php αρχείο που θα χειρισθεί την φόρμα. -->
<?php require 'script.php'; ?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<link rel="stylesheet" type="text/css" href="style.css">
<title>Image upload with php and mysql</title>
</head>
<body>
<!-- Ειναι σημαντικό σε κάθε φόρμα που εχουμε file upload να εχουμε το attribute (ιδιότητα)
enctype="multipart/form-data" αλλιώς το αρχείο δεν θα ανέβει -->
<form action="" method="post" enctype="multipart/form-data">
<h2>Upload image file</h2>
<fieldset>
<legend>Choose image</legend>
<input type="file" name="image" id="file" >
<input type="submit" name="upload" value="Upload">
<!-- Μέσα στο html έχουμε και δυό μεταβλητές php -->
<!-- Η $error θα μας δώσει όποιο σφάλμα προκύψει κατά την εκτέλεση του αρχείου -->
<!-- και η $success θα μας δώσει το επιτυχές μήνυμα. -->
<!-- Το σύμβολο @ μπροστά από τις μεταβλητές λέει στην php να Αγνοήσει το σφάλμα
αν αυτές δεν έχουν ορισθεί. -->
<p class="error"><?php echo @$error; ?></p>
<p class="success"><?php echo @$success; ?></p>
</fieldset>
<p class="note"><strong>Note: </strong> Αποδεκτά αρχεία .jpg, .jpeg, .gif, .png με μέγιστο μέγεθος 2 MB.</p>
</form>
</body>
</html>
style.css Στο CSS αρχείο μας, έχουμε ένα απλό styling της φόρμας και των πεδίων εισαγωγής.
body, html{
width: 100%;
height: 100%;
font-family: Ubuntu, 'sans-serif';
}
form{
max-width: 600px;
margin: 50px auto 0 auto;
border: thin solid #d4d4d4;
padding: 20px;
border-radius: 10px;
box-shadow: 0 0 15px rgba(0,0,0, .15);
}
form h2{
font-weight: normal;
}
input[type=submit]{
padding: 7px 25px;
background-color: #666;
color: #fff;
border: none;
cursor: pointer;
font-size: 16px;
border-radius: 5px;
}
input[type=submit]:hover{
background-color: #046319;
}
input[type=file]{
margin-top: 25px;
padding-left: 20px;
}
fieldset{
border: thin solid #d4d4d4;
border-radius: 10px;
}
legend{
padding: 0 15px;
}
p.note{
color: #2a4f88;
margin: 20px auto 0 auto;
font-size: 14px;
}
.error{
color: #bd1b1b;
margin-top: 30px;
font-size: 14px;
}
.success{
color: #046319;
margin-top: 30px;
font-size: 14px;
}
script.php Το php αρχείο
/* Ελέγχουμε αν η φόρμα έχει υποβληθεί (submit) */
if(isset($_POST['upload'])){
/**
* Η μεταβλητή $error θα κρατάει τα μηνύματα σφάλματος εαν προκύψουν.
* και θα τα τυπώνει στην html φόρμα.
*/
$error = "";
// Ελεγχουμε αν η φωτό έχει σταλεί και δεν υπάρχει κανένα σφάλμα.
if(isset($_FILES['image']) && $_FILES['image']['error'] == UPLOAD_ERR_OK){
/* Η $_FILES είναι ενας πίνακας (array) και μας δίνει όλες τις τιμές
που χρειαζόμαστε.
*/
$file_name = trim($_FILES['image']['name']); // Το όνομα
$file_type = $_FILES['image']['type']; // Το φορματ (jpg η png η png κτλ)
$file_temp = $_FILES['image']['tmp_name']; // Προσωρινή απόθήκευση του αρχείου.
$file_size = $_FILES['image']['size']; // Το μέγεθος σε kilobites
$upload_error = $_FILES['image']['error']; // Πιθανά σφάλματα
/* Δημιουργούμε εναν πίνακα (array) με το φορματ των αρχείων που θα επιτρέψουμε
για upload.*/
$valid_types = array("image/jpg", "image/jpeg", "image/png", "image/gif");
// Εδω με την in_array() ελεγχουμε αν το φορματ της φωτό που ανέβηκε υπάρχει μέσα στον πίνακα $valid_types.
if(in_array($file_type, $valid_types)){
// Αν το φορματ είναι έγκυρο συνεχίζουμε με την επικύρωση (validation) του μεγέθους του αρχείου.
// Δηλώνουμε στην $max_file_size το μέγιστο επιτρεπτό όριο. Εδω 2ΜΒ
$max_file_size = 2 * 1024 * 1024;
// Ελέγχουμε αν το αρχείο που ανέβηκε υπερβαίνει το μέγιστο επιτρεπτό όριο.
if($file_size <= $max_file_size){
/* Αν το αρχείο είναι έγκυρο θα ελέγξουμε αν υπάρχει ήδη κάποιο αρχείο
στον server με το ίδιο όνομα.*/
// Ορίζουμε τον φάκελο στον server όπου θα αποθηκευτεί το αρχείο.
// Εννοείτε ότι ο φάκελος υπάρχει ήδη στον server
$upload_folder = "uploads/";
/* Η file_exists() θα μας πει αν υπάρχει ήδη το αρχείο.
Η file_exists() παίρνει παράμετρο την διεύθυνση του αρχείου.
Το ! (θαυμαστικό) μπροστά από την συνάρτηση είναι αρνητικό.
Με λίγα λόγια, η ροή μεταφράζεται ως έξής:
Εαν δεν υπάρχει το αρχείο uploads/filename τότε ...
*/
if(!file_exists($upload_folder.$file_name)){
// Εαν δεν υπάρχει το αρχείο συνεχίζουμε.
/* Θα μετακινήσουμε το αρχείο από τον προσωρινό φάκελο που το αποθήκευσε η php
στον φάκελο που έχουμε ορίσει εμείς */
if(move_uploaded_file($file_temp, $upload_folder.$file_name)){
// Μήνυμα επιτυχούς Upload
$success = "Tο αρχείο ανέβηκε επιτυχώς";
}else{
// Μήνυμα ανεπιτυχείς μετακίνησης του αρχείου.
$error = "Παρουσιάστηκε σφάλμα στον server";
}
}else{
// Μήνυμα σφάλματος εαν το αρχείο υπάρχει ήδη στον server
$error = "Το αρχείο υπάρχει ήδη στον server";
}
}else{
// Σφάλμα μέγεθους αρχείου.
$error = "To αρχείο είναι μεγαλύτερο απο 2MB";
}
}else{
// το φορματ αρχείου που ανέβηκε δεν είναι μέσα στον $valid_types πίνακα.
$error = "Μη αποδεκτό αρχείο";
}
}else{
/**
* Εαν παρουσιαστεί σφάλμα κατα το upload του αρχείου στον προσορινό φάκελο της php πρεπει να ξέρουμε
* τι πήγε στραβά.
* Η $_FILES μας δίνει αυτό το σφάλμα με κάποιες σταθερές (constants)
*/
// Θα δημιουργήσουμε έναν πίνακα με κλειδί την σταθερά και τιμή το μήνυμα που την συνοδεύει.
$upload_error_msg = array(
UPLOAD_ERR_INI_SIZE => "Το αρχείο υπερβαίνει το μέγιστο μέγεθος που έχει δηλωθεί στο php.ini",
UPLOAD_ERR_FORM_SIZE => "Το αρχείο υπερβαίνει το μέγιστο μέγεθος που έχει δηλωθεί στην φόρμα HTML",
UPLOAD_ERR_PARTIAL => "Μόνο ενα τμήμα του αρχείου έχει ανέβει",
UPLOAD_ERR_NO_FILE => "Δεν έχει μεταφορτωθεί κανένα αρχείο",
UPLOAD_ERR_NO_TMP_DIR => "Δεν βρέθηκε προσωρινός φάκελος",
UPLOAD_ERR_CANT_WRITE => "Η εγγραφή στον δίσκο (server) απέτυχε",
UPLOAD_ERR_EXTENSION => "Μια PHP επέκταση διέκοψε την μεταφόρτωση του αρχείου"
);
// θα εκτελέσουμε εναν βρόχο (loop) με την foreach() συνάρτηση πάνω στον πίνακα $upload_error_msg[].
foreach ($upload_error_msg as $key => $value) {
/**
* Εδω το if θα ελέγξει όλα τα κειδιά, δηλ τις σταθερές, και θα ορίσει την τιμή στην μεταβλητή $error
η οποία βρίσκεται στην html φόρμα και θα μας τυπώσει το σφάλμα.
*/
if($key == $_FILES['image']['error']){
$error = $value;
}
}
}
}
Για περισότερες πληροφορίες πάνω στίς συναρτήσεις που χρησιμοποιήσαμε θα βρείτε στα παρακάτω links.
Σχόλια και ερωτήσεις μέσω facebook