Siteye görsel ekle butonu nasıl yapılır?

  • Konuyu başlatan tet
  • Başlangıç Tarihi
  • Mesaj 7
  • Görüntüleme 4B

tet

Hectopat
Katılım
13 Mart 2020
Mesajlar
234
Sitemde bir butona ihtiyacım var. Bu butona tıkladığım zaman bilgisayarımdan seçtiğim bir görseli siteme eklemek istiyorum nasıl yapılabilir?
 
Dosya seçme işi için tipi file olan input gerekiyor. Ancak dosya upload işlemi için back-end taraflı bir dile ihtiyacınız var.

 
Merhabalar, upload işlemi için gerekli olan PHP kodunu aşağıya bırakıyorum. Ayrıca yüklediğin resimlerin listelenmesi için bir kod da bıraktım.

Resimlerin yüklendiği klasörün adı "dosyalar"
İstersen kod içerisinde değiştirebilir, istersen de dosyalar adında klasör oluşturup oraya atmasını sağlayabilirsin.

Hangi türde dosyaları yüklemek istiyorsan kodda 'jpg','png','gif' olan kısımları kendine göre düzenleyebilirsin.

PHP:
<?php
if(isset($_FILES['dosya'])){
   $hata = $_FILES['dosya']['error'];
   if($hata != 0) {
      echo '<p style="color:red;">Yüklenemedi</p>';
   } else {
      $boyut = $_FILES['dosya']['size'];
      if($boyut > (1024*1024*2)){
         echo '<p style="color:red;">Dosya 2MB den büyük, yüklenemedi.</p>';
      } else {
         $tip = $_FILES['dosya']['type'];
         $isim = $_FILES['dosya']['name'];
         $uzanti = explode('.', $isim);
         $uzanti = $uzanti[count($uzanti)-1];
         if(!in_array($tip, ['image/png', 'image/jpeg', 'image/gif']) || !in_array($uzanti, ['png', 'jpg', 'gif'])) {
            echo '<p style="color:red;">JPG, PNG ve GİF hariç dosya yükleyemezsiniz.</p>';
         } else {
            $dosya = $_FILES['dosya']['tmp_name'];
            copy($dosya, 'dosyalar/' . $_FILES['dosya']['name']);
            echo '<p style="color:green;">Dosyanız upload edildi!</p>';
         }
      }
   }
}
?>
HTML:
<form action="" method="post" enctype="multipart/form-data">
   <input type="file" name="dosya" />
   <input type="submit" value="Gönder" />
</form>
PHP:
<?php
function dizin_listele($dizin)
{
    if(is_dir($dizin))
    {
        if($durum = opendir($dizin))
        {
            $say=0;
            while(($dosya = readdir($durum)) !== false)
            {
                if(
                $dosya != "." &&
                $dosya != ".." &&
                $dosya != "veritabani.db" &&
                $dosya != "admin.php" &&
                $dosya != "include"
                // Buraya listelenmesini istemediğiniz dosya veya klasörün ismini girebilirsiniz
                )
                {
                    $say++;
                    echo '<a target="_blank" href="'.$dizin.$dosya.'">'.$dosya.'</a><br>'."\n";
                }
              
            }
            echo '<br />Toplam resim sayısı : ' . $say;
            closedir($durum);
        }
    }
}

    dizin_listele("dosyalar/");
    // Listelenecek olan klasörün yolunu belirtelim.
    ?>

Bu kodları <body> tagına eklediğinde çalışacaktır.


1602839767277.png
 
Son düzenleme:
Dosya seçme işi için tipi file olan input gerekiyor. Ancak dosya upload işlemi için back-end taraflı bir dile ihtiyacınız var.


Şimdi bu kodu html css olarak siteme ekledim, fotoğraf ekleme butonunu tıklayıp pc üzerinden bir fotoğrafı seçtiğim zaman sadece ekranda fotoğrafın dosya adı çıkıyor, görüntü olarak çıkması için back-end gerekli diyosunuz doğru mu?

Merhabalar, upload işlemi için gerekli olan PHP kodunu aşağıya bırakıyorum. Ayrıca yüklediğin resimlerin listelenmesi için bir kod da bıraktım.

Resimlerin yüklendiği klasörün adı "dosyalar"
İstersen kod içerisinde değiştirebilir, istersen de dosyalar adında klasör oluşturup oraya atmasını sağlayabilirsin.

Hangi türde dosyaları yüklemek istiyorsan kodda 'jpg','png','gif' olan kısımları kendine göre düzenleyebilirsin.

Teşekkür ederim bayağı uğraşıp emek vermişsiniz umarım bundan faydalanacak kişiler olur ama benim işime yaramayacak maalesef... Çünkü biz asp.net kullanıyoruz ve ben projenin front-end kısmıyla ilgileniyorum yani bana sadece işin front-end kısmındaki kodları ya da nasıl yapıldığının mantığı yeterliydi. Sanırım konuyu açarken bunu belirtmeliymişim kusura bakmayın.
 
ASP.NET çalışsaydım bunun da örneğini paylaşırdım ama maalesef bilgim yok.
Bahsettiğiniz işlem için back-end şart. PHP veya ASP.NET gibi.
 
ASP.NET çalışsaydım bunun da örneğini paylaşırdım ama maalesef bilgim yok.
Bahsettiğiniz işlem için back-end şart. PHP veya ASP.NET gibi.

Anladım, zaten dediğim gibi ben işin front-end'ini yapayım bana yetiyor fotoğrafın yüklenmesini veya nasıl yükleneceğini başkası halledecek ama benim yazacağım kodun buna imkan verecek şekilde yazılmış olması gerekiyor tabii.
 
Anladım, zaten dediğim gibi ben işin front-end'ini yapayım bana yetiyor fotoğrafın yüklenmesini veya nasıl yükleneceğini başkası halledecek ama benim yazacağım kodun buna imkan verecek şekilde yazılmış olması gerekiyor tabii.
Bahsettiğine göre sadece HTML yeterli senin için. Sen alttaki kodu ekle, back-end yapan arkadaş kontrol edip ona göre kodlayacaktır.
accept="****" kısmında desteklenen formatları belirtebilirsin.

HTML:
<form method="post" action="" enctype="multipart/form-data">
  <div>
    <label for="image_uploads">Dosya seçiniz (JPG-PNG)</label>
    <input type="file" id="image_uploads" name="image_uploads" accept=".jpg, .jpeg, .png" multiple>
    <button type="submit">Yükle!</button>
</div>
</form>
 
Bahsettiğine göre sadece HTML yeterli senin için. Sen alttaki kodu ekle, back-end yapan arkadaş kontrol edip ona göre kodlayacaktır.
accept="****" kısmında desteklenen formatları belirtebilirsin.

HTML:
<form method="post" action="" enctype="multipart/form-data">
  <div>
    <label for="image_uploads">Dosya seçiniz (JPG-PNG)</label>
    <input type="file" id="image_uploads" name="image_uploads" accept=".jpg, .jpeg, .png" multiple>
    <button type="submit">Yükle!</button>
</div>
</form>

Teşekkür ederim, muhtemelen iş görür.
 

Yeni konular

Geri
Yukarı