• Buradasın

    AJAX ve PHP ile Çoklu Dosya Yükleme Eğitimi

    youtube.com/watch?v=441YzBGaOzg

    Yapay zekadan makale özeti

    • Bu video, Tayfun Erbilen tarafından Prototurk.com için hazırlanan teknik bir eğitim içeriğidir. Eğitmen, sabah erken saatlerde ve işi olmadığı sırada izleyicilere örnek bir uygulama göstermektedir.
    • Videoda, AJAX ve PHP kullanarak çoklu dosya yükleme işleminin nasıl yapılacağı adım adım anlatılmaktadır. İçerik, HTML ve CSS ile form tasarımı, jQuery ile dosya yükleme formu oluşturma ve PHP ile dosya yükleme işlemleri olmak üzere üç ana bölümden oluşmaktadır. Eğitmen, küçük, büyük ve altı tane dosya yükleme örnekleri göstererek sayfa yenilenmeden dosya yükleme işleminin nasıl gerçekleştirilebileceğini göstermektedir.
    • Eğitim, input type="file" kullanımı, form action ve type ayarları, iframe kullanımı ve dosya yükleme sonrası sonuçların ekrana yazdırılması gibi konuları detaylı olarak ele almaktadır. Video sonunda eğitmen, izleyicilere bu örneği kullanmalarını tavsiye etmediğini ve takıldıkları yerlerde bu videoyu kullanabileceklerini belirtmektedir.
    00:03Çoklu Dosya Yükleme Örneği Tanıtımı
    • Tayfun Erbil, Prototurk.com adresi için hazırladığı bu videoda AJAX ve PHP kullanarak çoklu dosya yükleme işleminin nasıl yapılacağını anlatacak.
    • Örnek için FTP'de "index" ve "dosya yükle" adında iki dosya oluşturulmuş, ayrıca "yükleniyor.gif" formatında bir dosya ve bir dosya klasörü mevcut.
    01:12HTML ve CSS Yapısı
    • Normal HTML yapısı oluşturulduktan sonra jQuery dosyası çağrıldı ve CSS yazma alanı oluşturuldu.
    • Genel div için genişlik 400 piksel, margin 30 piksel auto ve body için arka plan rengi ee olarak belirlendi.
    • Form için padding, margin ve border sıfırlama yapıldı, text decoration ve image border sıfırlandı.
    03:34Form Tasarımı
    • Yükleme formu için "dosya yükleme dosyaları" başlığı ve "dosya seç" inputu oluşturuldu.
    • Çoklu gönderme işlemi için input type "file" kullanıldı ve "name" özelliği küme parantezi içinde belirtildi.
    • Formun alt kısmına "dosya ekle" butonu eklendi ve "yeni dosya ekle" açıklaması yapıldı.
    06:51jQuery Kodları
    • Document nesnesine load işlemi yapıldı ve "dosya ekle" butonuna click fonksiyonu eklendi.
    • Form action özelliği "dosya yükle.php" olarak ayarlandı ve formun type'ı "multi-part/form-data" olarak belirlendi.
    • Form submit edildiğinde çalışacak fonksiyon için bind işlemi yapıldı.
    08:46Sonuçlar Bölümü
    • Formun hemen arkasına "id sonuçlar" olan bir div oluşturuldu ve arka plan rengi beyaz, border 2 piksel solid olarak belirlendi.
    • Form gönderildikten sonra gelen veriyi aktarmak için görünmez bir iframe oluşturuldu.
    • Form gönderildikten sonra iframe'e bir image eklendi ve iframe'in içeriği body'ye aktarıldı.
    12:14PHP Kodları
    • PHP kısmında for döngüsü kullanılarak dosya isimleri sayıldı ve dosya formatları kontrol edildi.
    • JPEG, PNG ve GIF formatlarında olan dosyalar için işlem yapıldı, hatalı formatlar için "yanlış format" mesajı ekrana yazdırıldı.
    • Dosya uzantısı bulunup, dosya geçici konumdan belirtilen dizine taşındı ve başarılı yükleme durumunda resim döndürüldü.
    15:41AJAX ve PHP ile Dosya Yükleme Örneği
    • İşlemlerin başarılı gitmesi durumunda, AJAX ve PHP ile dosya yükleme işlemi düzgün çalışacak ve hayal kırıklığına uğratmayacak.
    • Resim yükleme için piksel değerleri ayarlanıyor: altı piksel genişlik ve altı piksel margin bottom.
    • İlk olarak küçük resimler yükleniyor ve başarıyla yüklendiği görülebiliyor.
    16:19Büyük Resimlerin Yükleme İşlemi
    • Daha büyük resimler yükleniyor ve yükleme işlemi bitene kadar dönmeye devam ediyor.
    • Yükleme işlemi bittiğinde, bin ile load işlemi gerçekleşiyor ve resim kaldırılıyor.
    • Sonuçlar div'nin içine yazdırılıyor.
    16:58Çoklu Dosya Yükleme
    • Altı tane dosya yükleniyor ve sayfa yenilenmeden kolayca yükleniyor.
    • AJAX ve PHP kullanarak dosya upload işlemi bu kadar basit.
    • Örnek paylaşılabilir ancak izleyicilerin bu örneği doğrudan kullanmaması öneriliyor.

    Yanıtı değerlendir

  • Yazeka sinir ağı makaleleri veya videoları özetliyor