Cuma , 22 Eylül 2017
Anasayfa » JavaScript » AngularJS » AngularJS Dosya Yükleme( PHP )

AngularJS Dosya Yükleme( PHP )

Bu yazıda AngularJS file upload işlemi için github üzerinde dağıtılan bir modülün basit kullanımını yazacağım. Aşağıdaki kodların yazılmış halini sayfanın sonunda indirebilirsiniz. Dosya yükleme işlemi için github üzerinde kullandığım eklentinin sitesine girip daha detaylı kullanımını inceleyebilirsiniz. https://github.com/nervgh/angular-file-upload/

Başka bir yazıda sadece javascript ve angularjs kullanarak farklı bir uploader yapacağım.(Eklentisi varken ayrı bir yükleyici yapmak çok gerekli mi tartışılacak bir konu 🙂 )

 

Eklentili AngularJS File Upload

 

Eklentisiz AngularJS File Upload

 

Eklentili Dosya Yükleyici

1.Adım : Github üzerinden yada uygulamanın bitmiş halinden script dosyalarını HTML sayfamıza dahil ediyoruz. Sayfanın daha düzgün görünmesi için bootstrap css kütüphanesini projeye cdn üzerinden dahil edilmiştir.  controller.js dosyasını da oluşturuyoruz.

 

2.Adım:  controller.js dosyalarını aşağıdaki şekilde oluşturuyoruz.

3. Adım: controller içinde dosya yükleme için kullanılacak PHP dosyasını aşağıdaki şekilde oluşturuyoruz.(  upload.php  )

Upload.php dosyasının bulunduğu dizin içinde dosyalar klasörüne yükleme yapılacaktır. Bu nedenle dosyalar klasörünü de oluşturmak gerekiyor.

 

4.Adım: HTML dosyasının body kısmı. container class içinde kullanılan nv-file-drop özelliği ile bulunan gri alan üzerinde dosyalar bırakıldığında dosya yükleyici için dosyaları otomatik olarak bağlamaktadır.

En basit hali ile angularjs file uplad örneğini indirip kullanbilirsiniz.

 

Eklentisiz Dosya Yükleyici

İnternette bulduğum tekli dosya yükleme örneğini çoklu olarak düzenleyip tekrar attım.  Bulduğum kaynaktaki örnek çalışmamasına rağmen kodların çoğu yazıldığı için referans olarak sayfanın altında belirttim.

1.Adım: HTML Dosyasını Oluşturulması

 

2.Adım: Angularjs kütüphanesini dahil etme, diretifleri ve kontroller hazırlama

 

3.Adım: Dosya Yükleyicisi olan upload.php sayfasını oluşturma. UNUTMAYIN dosyalar klasörünün upload.php dosyası ile aynı yerde olması gerekiyor.

 

 

 

KAYNAK

https://www.tutorialspoint.com/angularjs/angularjs_upload_file.htm

Hakkında Hayri

İlginizi Çekebilir

AngularJS Route Yapma #2

Route ve template kavramı ile ilgili ikinci yazımızda oluşturduğumuz kontrolleri template dosyalarına bağlamayı anlatacağım.  Bu …

Bir Cevap Yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir