Bu yazı, JavaScript ve HTML kullanarak görüntüyü yükleme yöntemini gösterecektir.
JavaScript/HTML Kullanarak Basit Bir Resim Nasıl Yüklenir?
JavaScript kullanarak basit bir resim yüklemek için, önce HTML sayfasına bir resim etiketi ekleyeceğiz ve ardından resmi web sayfasına yüklemek ve seçmek için JavaScript kodunu kullanacağız.
Pratik uygulamalar için, belirtilen talimatları deneyin.
Örnek
Her şeyden önce, verilen talimatları izleyin:
- “
” öğesini seçin ve giriş türünü “ olarak belirtin. dosya ”. - Bu 'dosya' türü, dosya seçiminde alanı belirler ve bir ' Araştır Dosyaları yüklemek için ” düğmesine basın.
- “
” etiketi bir satır sonu ekler. - Ardından, bir “
” HTML etiketi ve “ ekleyin İD ”, belirli bir ada sahip benzersiz kimliği belirtmek için öznitelik.
- “ kaynak ” medya dosyasının URL'sini eklemek için kullanılan özellik:
< br >
< görüntü kimliği = 'benim görselim' kaynak = '#' >
Bir dosya seçeneğinin oluşturulduğu fark edilebilir ve görüntü adını yalnızca bir girdi olarak kabul ettikten sonra görüntüleyebilir:
Şimdi, “içinde
< senaryo >
pencere. addEventListener ( 'yük' , işlev ( ) {
belge. sorgu seçici ( 'girdi[tip='dosya']' ) . addEventListener ( 'değiştirmek' , işlev ( ) {
eğer ( Bu . Dosyalar && Bu . Dosyalar [ 0 ] ) {
değişiklik = belge. getElementById ( 'img_content' ) ;
img. aşırı yük = ( ) => {
URL . Nesne URL'sini iptal et ( img. kaynak ) ;
}
img. kaynak = URL . nesneURL'si oluştur ( Bu . Dosyalar [ 0 ] ) ;
}
} ) ;
} ) ;
senaryo >
Yukarıdaki kod parçacığında:
- “ addEventListener() JavaScript yöntemi, tanımlanmış bir olay işleyicinin bir öğeye eklenmesine veya eklenmesine izin verir.
- “ sorguSelector() ”, belirli bir seçiciye bağlanan belirli belgedeki ilk öğeyi döndürmek için kullanılan bir yöntemdir.
- “ getElementById() Tanımlanan id kullanılarak eleman elde etmek için ” yöntemi kullanılır. Bu amaçla parametre olarak the değeri iletilir.
- “ iptalObjectURL() ”, URL kullanılarak oluşturulan mevcut bir nesne URL'sini serbest bırakır. Bunu yapmak için görüntünün URL'si bu yöntemin parametresi olarak iletilir.
- “ nesneURL() oluştur ”, belirli bir dizenin parametrede iletilen nesneyi temsil eden bir URL'ye sahip olmasını sağlayan bir JavaScript statik yöntemidir.
Çıktı
Basit bir görseli başarıyla yüklediğimiz fark edilebilir.
Çözüm
Basit görüntüyü JavaScript kullanarak yüklemek için “ addEventListener() ” tanımlı bir olay işleyicinin bir öğeye eklenmesine veya eklenmesine izin veren yöntem. Ardından, tanımlanan öğeye id ile erişin ve “ iptalObjectURL() ' Ve ' nesneURL() oluştur ” yöntemleri. Bu gönderi, JavaScript/HTML kullanan basit resim yükleme yöntemini belirtiyordu.