Alpine.js’de Resim Yükleme Önizlemesi

Raymond Camden

Şimdi birkaç kez söylediğim gibi, burada önceki demoları vanilyada (yani çerçeve yok) JavaScript’te veya yeni favori çerçevemde yeniden oluşturma konusunda bir tür eğilimdeyim, Alpine.js. Bu bağlamda, yaklaşık on yıl önce ilk kez yazdığım bir gönderiye güncelleme geldi, “Çoklu dosya yükleme HTML denetimine dosya görüntüleme listesi ekleme”. Bunu burada bir Vue sürümü ile takip ettim: “Vue Quick Shot – Resim Yükleme Önizlemeleri”. Buradaki fikir, görüntünün basit bir önizlemesini ekleyerek görüntü yüklemelerini isteyen bir formu geliştirmekti. Bu, kullanıcının doğru dosyayı seçtiğinden emin olmasını sağladığı için yardımcı olur.

Alpine.js çok Vue’ya benzer, bu nedenle aşağıdakilerin çoğu önceki gönderiye çok yakındır. İşte kullandığım HTML – gerçek bir formun muhtemelen daha fazla alan isteyeceğini unutmayın:

<form x-data="imgPreview" x-cloak>
    <label for="imgSelect">Select an Image:</label>
    <input type="file" id="imgSelect" accept="image/*" x-ref="myFile" @change="previewFile">
    <template x-if="imgsrc">
        <p>
        <img :src="imgsrc" class="imgPreview">
        </p>
    </template>
</form>

Üstte, x-data yönergesi, formu birazdan göstereceğim JavaScript ile eşler. Daha sonra bir etiketim ve giriş alanım var. kullanımına dikkat edin accept kullanıcıyı görüntü dosyalarıyla kısıtlamak için. (Ve her zaman olduğu gibi, bunun gibi şeylere güvenemeyeceğinizi unutmayın. Yüklemeyi gerçekleştiren kodunuz, bir görüntünün gerçekten yüklendiğini doğrulamalıdır.) Giriş alanı şunları kullanır: @change değer değiştiğinde çalıştırılacak bir yöntem belirtmek için, previewFile. Ayrıca, not edin x-ref. Daha sonra, kodumun DOM öğesine doğrudan erişmesi gerekecek ve bu, Alplerde bunu yapmanın yoludur.

İkinci blok, önizlemeyi yönetir. bir kalıba sarıyorum x-if böylece önizleme yalnızca bir değer mevcut olduğunda orada olur. Bu değer, imgsrc, resim etiketine bağlıdır. Şimdi JavaScript’e bakalım:

document.addEventListener('alpine:init', () => {
  Alpine.data('imgPreview', () => ({
    imgsrc:null,
    previewFile() {
        let file = this.$refs.myFile.files[0];
        if(!file || file.type.indexOf('image/') === -1) return;
        this.imgsrc = null;
        let reader = new FileReader();

        reader.onload = e => {
            this.imgsrc = e.target.result;
        }

        reader.readAsDataURL(file);
    
    }
  }))
});

Alplere özgü dinleyiciyle başlıyorum, alpine:initve bunun içinde, uygulamam için adlı verileri oluşturuyorum. imgPreview. Uygulamada, toplamda bir değişkenim var, imgsrcve bir yöntem, previewFile. İçinde previewFile, önce bir dosyanın seçilip seçilmediğini ve bunun bir resim olup olmadığını görüyoruz. Bunu geçersek sıfırlarız imgsrc null (birden çok kez seçmeleri durumunda) ve ardından bir FileReader nesne. Bunu bir veri URL’si olarak okuduk ve ardından imgsrc yüklendikten sonra değişken.

Son kısım, görüntünün nispeten küçük kalmasını sağlamak için biraz CSS’dir:

img.imgPreview {
    max-width: 250px;
    max-height: 250px;
}

Denemek ister misin? Aşağıdaki CodePen’e göz atın:

Kalemi Gör başlıksız tarafından Raymond Camden (@cfjedimaster) üzerinde kod kalemi.

Bir cevap yazın

E-posta hesabınız yayımlanmayacak.