Πίσω στο ευρετήριο

Image upload with php Posted: 17-Feb-2020 18:17 PM

php, html, css tutorial
Δες το Demo Κατέβασε τα αρχεία 16 downloads

Με την 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

Παρόμοια php tutorials

Uploading an article with image 01-Mar-2020 22:13 PM Έχουμε μια φόρμα με τρία πεδία, τίτλο,άρθρο, και εικόνα, θα ανεβάσουμε την εικόνα στον server και θα εισάγουμε τα στοιχεία σε μια mysql βάση. Image upload with php 17-Feb-2020 18:17 PM Σε αυτό το tutorial θα ανεβάσουμε μια φωτό στον server, και θα επικυρώσουμε (validate) αν η φωτό είναι έγκυρη.
Register form with php and ajax 24-Feb-2020 16:39 PM Εχουμε μια φόρμα εγγραφής στην οποία τα δεδομένα θα σταλούν με Ajax στο php αρχείο για επικύρωση. Contact form validation with php 16-Mar-2020 00:54 AM Θα επικυρώσουμε μια φόρμα επικοινωνίας με php, και θα εισάγουμε τις τιμές σε μια βάση δεδομένων. Image resizing with php 09-Mar-2020 19:16 PM Ενα php script για να τροποποιούμε τις διαστάσεις των φωτόγραφίων κατά το upload.

css Tutorials

Resposive navbar with css and javascript 05-Mar-2020 21:24 PM Ένα responsive οριζόντιο μενού πλοήγησης για μικρή και μεγάλη οθόνη, με css και λίγη javascript. Highlight selected menu page 12-Mar-2020 11:56 AM Έχουμε ένα οριζόντιο μενού όπου θα αλλάζουμε το background-color του link στην επιλεγμένη σελίδα. Responsive grid layout 04-Mar-2020 17:15 PM Έχουμε μια responsive ιστοσελίδα που προσαρμόζεται σε όλες τις οθόνες Sticky navbar με css και javascript 28-Feb-2020 18:32 PM Έχουμε ένα οριζόντιο μενού όπου θα κολλάει στήν αρχή της σελίδας όταν κάνουμε scroll.

javascript Tutorials

Show hide password with javascript 10-Mar-2020 23:28 PM Ένα javascript που εμφανίζει τα γράμματα όταν πληκτρολογούμε στο πεδίο password. javascript and css slideshow 21-Feb-2020 01:27 AM Slideshow με fade effect, κείμενο, cta button, και responsive design γραμμένο σε css και javascript Autofill select combo box 27-Feb-2020 00:10 AM Θα δούμε πως μπορούμε να συνδυάσουμε δυο select drop-down menu έτσι ώστε επιλέγοντας το πρώτο να δίνουμε τις ανάλογες τιμές στο δεύτερο. Image preview with javascript 19-Feb-2020 16:04 PM Άμεση απεικόνιση της εικόνας σε file upload ενέργεια

webDev Αναφορές

PHP Net Το σπίτι της php είναι η πιο έγκυρη πηγή εκμάθησης. Javascript Μozilla MDN web docs Τα πάντα για την Javascript. Όρεξη να έχεις να διαβάζεις. CSS Μozilla MDN web docs Απο βασικά styles εως animation, εδω θα τα μάθεις όλα. Programming Notes for Professionals Μια φοβερή συλλογή από PDF αρχεία, από Android εώς C++. Αξίζει να κατεβάσετε και να μελετήσετε τα αρχεία.

PHPDev Tutorials | Site developed by PHPDev.gr Visit PHPDev

scrollTo('top')