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

Image preview with javascript Posted: 19-Feb-2020 16:04 PM

javascript, html tutorial
Δες το Demo Κατέβασε τα αρχεία 10 downloads

Είναι πολύ χρήσιμο για τον χρήστη να μπορεί να δεί την εικόνα που θέλει να ανεβάσει, και όχι μονο το όνομα του αρχείου διπλα στο choose file buton. Ας δούμε παρακάτω πως θα γίνει αυτό.
Θα χρειαστούμε τα παρακάτω αρχεία.

  • Ενα αρχείο index.html για την html φόρμα
  • Ένα αρχείο script.js για τον κώδικα javascript

index.html


<!-- Ειναι σημαντικό σε κάθε φόρμα που εχουμε file upload να εχουμε 
το attribute (ιδιότητα) enctype="multipart/form-data" αλλιώς το αρχείο 
δεν θα ανέβει.  -->
<form action="" method="post" enctype="multipart/form-data">

    <h2>Image preview with javascript</h2>
  
  <!-- Σε αυτό το html tag θα εμφανίζεται η επιλεγμένη εικόνα μας -->
  <div class="image-placeholder">
    <!-- Μέσα από την javascript θα στοχεύσουμε το src="" για να προσθέσουμε 
    την διεύθηνση(URL) της εικόνας μας. -->
    <img id="uploadPreview" src="" width="100%">
  </div>

  <fieldset>
    <legend>Choose image</legend>
      <!-- Η javascript συνάρτηση previewImage() θα τρέχει κάθε φορά που θα πατάμε
        το choose file button της φόρμας. -->
      <input type="file" name="image" id="uploadImage" onchange="PreviewImage();" >
      <input type="submit" name="upload" value="Upload">
  </fieldset>
  
  <!-- Το html στοιχείο όπου θα δείχνουμε κάποιο σφάλμα, αν προκύψει -->
  <p class="error"></p>    
  
  <p class="note">
    <strong>Note: </strong> 
    Αποδεκτά αρχεία .jpg, .jpeg, .gif, .png με μέγιστο μέγεθος 1MB.
  </p>
</form>

<!-- Link στο javascript αρχείο. -->
<script src="script.js"></script>

script.js


function PreviewImage() {
   
  // Δημιουργούμε την μεταβλητή error στοχεύοντας το html στοιχείο με την class="error"
   // για να μη γράφουμε συνέχεια "document.querySelector('.error')".
   let error = document.querySelector('.error');
 
   // Καθαρίζουμε το error html στοιχείο σε περίπτωση που είχαμε κάποιο σφάλμα.
   error.innerHTML = '';
 
   // Στοχεύουμε το input file στην html φόρμα, και με την files[0], παίρνουμε
   // τις πληροφορίες που θέλουμε για το αρχείο που επιλέξαμε, όπως το όνομα, το μέγεθος,
   // τον τύπο(jpg, png, κτλ). 
   // Η files μας επιστρέφει έναν πίνακα, οπότε εμείς στοχεύουμε την πρώτη τιμή(value)
   // στον πίνακα με το κλειδί(key) [0]. 
   let file = document.getElementById("uploadImage").files[0];
 
   // Καλούμε το αντικείμενο FileReader()
   let reader = new FileReader();
   
   // Ή μέθοδος readAsDataURL() του αντικειμένου(object) FileReader(), διαβάζει τον 
   // δυαδικό κώδικα του αρχείου και τον επιστρέφει ως data URL. Για να διαβαστεί από
   // τον Browser.
   reader.readAsDataURL(file);
 
   // Όταν διαβάσει(onload) ο Browser το αρχείο, χωρίς σφάλματα ...
   reader.onload = function (event) {
      // ... θα στοχεύσουμε το html img tag για να εμφανίσουμε την εικόνα μας.
      return document.getElementById("uploadPreview").src = event.target.result;
   };
 
   // Αν προκύψει σφάλμα από την μεριά του Browser και δεν διαβαστεί σωστά το αρχείο ...
   reader.onerror = function(event){
      // ... θα επιστρέψουμε ένα μήνυμα στην html φόρμα μας.
      return error.innerHTML = 'Σφάλμα ανάγνωσης του αρχείου';
   }
 
   // Επικύρωση(validation) του αρχείου.   
   // Θα ελέγξουμε το μέγεθος(size) και τον τύπο(type).
   
   // Ανώτατο επιτρεπτό όριο 1 MB
   let maxSize = 1024 * 1024; 
 
   // Μέσα στον πίνακα validTypes έχουμε τους έγκυρους τύπους των αρχείων.
   let validTypes = ["image/jpg", "image/jpeg", "image/png", "image/gif"];
 
   // Ελέγχουμε το μέγεθος του αρχείου.
   if(file.size > maxSize){
      // Μη αποδεκτό μέγεθος.
      error.innerHTML = `Το αρχείο υπερβαίνει το ${maxSize / 1024 / 1024}MB`;
      return false;
   }
 
   // Ελέγχουμε τον τύπο του αρχείου.
   // Η arr.includes() θα τρέξει όλα τα στοιχεία του πίνακα validTypes[]
   // και θα συγκρίνει τον τύπο του αρχείου που επιλέξαμε με τους τύπους 
   // που έχουμε δηλώσει μέσα στον πίνακα. 
   if(!validTypes.includes(file.type)){
      // Μήνυμα σφάλματος.
      error.innerHTML = "Μη έγκυρος τύπος αρχείου";
      return false;
}else{
      // το αρχείο είναι εγκυρο ...  
}

Για περισότερες πληροφορίες πάνω στίς συναρτήσεις που χρησιμοποιήσαμε θα βρείτε στα παρακάτω links.

Σχόλια και ερωτήσεις μέσω facebook

Παρόμοια javascript tutorials

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

php Tutorials

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 αρχείο για επικύρωση. Image resizing with php 09-Mar-2020 19:16 PM Ενα php script για να τροποποιούμε τις διαστάσεις των φωτόγραφίων κατά το upload. Uploading an article with image 01-Mar-2020 22:13 PM Έχουμε μια φόρμα με τρία πεδία, τίτλο,άρθρο, και εικόνα, θα ανεβάσουμε την εικόνα στον server και θα εισάγουμε τα στοιχεία σε μια mysql βάση. Contact form validation with php 16-Mar-2020 00:54 AM Θα επικυρώσουμε μια φόρμα επικοινωνίας με php, και θα εισάγουμε τις τιμές σε μια βάση δεδομένων.

css Tutorials

Responsive grid layout 04-Mar-2020 17:15 PM Έχουμε μια responsive ιστοσελίδα που προσαρμόζεται σε όλες τις οθόνες Sticky navbar με css και javascript 28-Feb-2020 18:32 PM Έχουμε ένα οριζόντιο μενού όπου θα κολλάει στήν αρχή της σελίδας όταν κάνουμε scroll. 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 στην επιλεγμένη σελίδα.

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')