Αυτή η εγγραφή θα δείξει τη μέθοδο για τη μεταφόρτωση της εικόνας χρησιμοποιώντας JavaScript και HTML.
Πώς να ανεβάσετε μια απλή εικόνα χρησιμοποιώντας JavaScript/HTML;
Για να ανεβάσουμε μια απλή εικόνα χρησιμοποιώντας JavaScript, πρώτα, θα προσθέσουμε μια ετικέτα εικόνας στη σελίδα HTML και στη συνέχεια θα χρησιμοποιήσουμε τον κώδικα JavaScript για να φορτώσουμε και να επιλέξουμε την εικόνα στην ιστοσελίδα.
Για πρακτικές συνέπειες, δοκιμάστε τις αναφερόμενες οδηγίες.
Παράδειγμα
Πρώτα απ 'όλα, ακολουθήστε τις οδηγίες που δίνονται:
- Εισαγάγετε το ' <εισαγωγή> ' στοιχείο και καθορίστε τον τύπο της εισόδου ως ' αρχείο '.
- Αυτός ο τύπος 'αρχείου' καθορίζει το πεδίο στην επιλογή αρχείου και ένα ' Ξεφυλλίζω κουμπί ” για τη μεταφόρτωση των αρχείων.
- '
Η ετικέτα ' εισάγει μια αλλαγή γραμμής. - Στη συνέχεια, εισάγετε ένα '
'Ετικέτα HTML και προσθέστε το ' ταυτότητα ” για να καθορίσετε το μοναδικό αναγνωριστικό με ένα συγκεκριμένο όνομα.
- ' src ” χαρακτηριστικό που χρησιμοποιείται για την προσθήκη της διεύθυνσης URL του αρχείου πολυμέσων:
< br >
< img id = 'Η εικόνα μου' src = '#' >
Μπορεί να παρατηρηθεί ότι έχει δημιουργηθεί μια επιλογή αρχείου και μπορεί να εμφανίσει το όνομα της εικόνας μόνο αφού δεχτεί μια εισαγωγή:
Τώρα, μέσα στο « <σενάριο> ετικέτα, χρησιμοποιήστε τον ακόλουθο κώδικα:
< γραφή >
παράθυρο. addEventListener ( 'φορτώνω' , λειτουργία ( ) {
έγγραφο. querySelector ( 'input[type='file']' ) . addEventListener ( 'αλλαγή' , λειτουργία ( ) {
αν ( Αυτό . αρχεία && Αυτό . αρχεία [ 0 ] ) {
varimg = έγγραφο. getElementById ( 'img_content' ) ;
img. σε φορτίο = ( ) => {
URL . revokeObjectURL ( img. src ) ;
}
img. src = URL . createObjectURL ( Αυτό . αρχεία [ 0 ] ) ;
}
} ) ;
} ) ;
γραφή >
Στο παραπάνω απόσπασμα κώδικα:
- ' addEventListener() Η μέθοδος JavaScript επιτρέπει την εισαγωγή ή την προσάρτηση ενός καθορισμένου προγράμματος χειρισμού συμβάντων σε ένα στοιχείο.
- ' querySelector() ” είναι μια μέθοδος που χρησιμοποιείται για την επιστροφή του πρώτου στοιχείου στο συγκεκριμένο έγγραφο που συνδέεται με τον συγκεκριμένο επιλογέα.
- ' getElementById() Η μέθοδος χρησιμοποιείται για τη λήψη του στοιχείου χρησιμοποιώντας το καθορισμένο αναγνωριστικό. Για το σκοπό αυτό, η τιμή του μεταβιβάζεται ως παράμετρος.
- ' revokeObjectURL() ' απελευθερώνει μια υπάρχουσα διεύθυνση URL αντικειμένου που δημιουργήθηκε χρησιμοποιώντας τη διεύθυνση URL. Για να γίνει αυτό, η διεύθυνση URL της εικόνας μεταβιβάζεται ως παράμετρος αυτής της μεθόδου.
- ' createObjectURL() ” είναι μια στατική μέθοδος JavaScript που κάνει μια συγκεκριμένη συμβολοσειρά να έχει μια διεύθυνση URL που αντιπροσωπεύει το αντικείμενο που έχει περάσει στην παράμετρο.
Παραγωγή
Μπορεί να παρατηρηθεί ότι έχουμε ανεβάσει με επιτυχία μια απλή εικόνα.
συμπέρασμα
Για να ανεβάσετε την απλή εικόνα χρησιμοποιώντας JavaScript, χρησιμοποιήστε το ' addEventListener() ' μέθοδος που επιτρέπει την εισαγωγή ή την προσάρτηση ενός καθορισμένου προγράμματος χειρισμού συμβάντων σε ένα στοιχείο. Στη συνέχεια, αποκτήστε πρόσβαση στο καθορισμένο στοιχείο με αναγνωριστικό και χρησιμοποιήστε το ' revokeObjectURL() ' και ' createObjectURL() μεθόδους. Αυτή η ανάρτηση ανέφερε την απλή μέθοδο μεταφόρτωσης εικόνας χρησιμοποιώντας JavaScript/HTML.