Jquery kuaza resim yükleme uygulaması (plupload + Sürükle bırak + prntscr + verot + resize)

Jquery kuaza resim yükleme uygulaması ile bir çok işlemi aynı anda yapabilen, kaliteli bir yapıya sahip olacaksınız. Bunlar arasında ekran resmini alıp, CTRL + V ile sayfaya yapıştırarak resim yükleme özelligide dahil. Ve dahası..

Yakın zamanda böyle bir uygulama için zaman ayırıp, ihtiyacı olabilecek web yazılımcı arkadaşlar yada bu konuda kendini geliştirmek isteyenler için güzel ve faydalı bir script oluşturmak istiyordum. Scriptin bir örneğinide piclect.com da kullanmaya başladık. Ekstra gereksiz konulardan arındırıp sade ve anlaşılabilir ancak bir çok özelligide içinde barındıran scriptimizide yayınlıyoruz.

V1 versiyon:

DEMO Download (indir)

Veritabanı ile çalışan versiyonu V2:

DEMO v2 Download (indir) – V2

V1 Ekran görüntüsü

V2 Ekran görüntüsü:

V1 Script’in özellikleri:

• Bilgisayarınızdan yada albümünüzden resim seçerek yükleme
• Sürükle bırak yöntemi ile resimleri sayfada herhangi bir yere bıraktığınızda yükleme
• Ekran resmini klavyenizdeki print screen tuşu ile alıp, sayfaya CTRL+V ile yapıştırarak yükleme
• Seçilen resimlerin onizleme görüntülerini oluşturması
• Yükleyeceğiniz resimleri boyutlandırabilmesi.
• Jquery ve ajax yöntemi ile sayfa yenilenmeden anında yükleme yapar ve kodları sayfanın altında listeler.
• Sonucu ister array olarak alırsınız, istersenizde gösterme kodları ile.
• Watermark özelliği: Resim üzerine yazı yazdırabilirsiniz. Fligran şeklinde yada kişiselleştirerek daha detaylı çalışmalar yapabilirsiniz.

V2 Script’in özellikleri:

• Yüklenen resimleri veritabanına kaydeder ve orda saklar
• Yüklenen son 10 resmi index ve resim gösterme sayfasında en altda listeler
• Yüklenen resim için ayrı bir gösterim sayfası hazırlanmıştır, tekil resimlere bu sayfadan bakabilirsiniz.
• Ayarlar tek dosyaya alındı.
• Bootstrap versiyonu son versiyona güncellendi (3.3.7)
• Bilgisayarınızdan yada albümünüzden resim seçerek yükleme
• Sürükle bırak yöntemi ile resimleri sayfada herhangi bir yere bıraktığınızda yükleme
• Ekran resmini klavyenizdeki print screen tuşu ile alıp, sayfaya CTRL+V ile yapıştırarak yükleme
• Seçilen resimlerin onizleme görüntülerini oluşturması
• Yükleyeceğiniz resimleri boyutlandırabilmesi.
• Jquery ve ajax yöntemi ile sayfa yenilenmeden anında yükleme yapar ve kodları sayfanın altında listeler.
• Sonucu ister array olarak alırsınız, istersenizde gösterme kodları ile.
• Watermark özelliği: Resim üzerine yazı yazdırabilirsiniz. Fligran şeklinde yada kişiselleştirerek daha detaylı çalışmalar yapabilirsiniz.

Scripti geliştirirken kullandığım uygulamalar:

• Plupload: Popüler jquery resim upload uygulaması (select, drag & drop)
• Verot: Resimleri küçültme, onizleme oluşturma, resim üzerine yazı yazdırma gibi işlemler için kullanıyorum. Kaliteli resim işleme uygulaması.
• Print screen: Ekran resmini kopyalayıp, ekrana yapıştırarak yükleme özelliği içinde aşağıdaki kaynaklardan yararlandım:
  • Joel Besda
  • Rafael
  • Nick et al
• Bootstrap: Görsel tasarım için kullandığım uygulama.

Bu uygulamayı nasıl ve ne tür işlerde kullanabilirsiniz ?

• Bu şekilde resim yükleme sitesi kurabilirsiniz. DB yok (v1), ekstra işlem yok, basit bir resim yükleme siteniz olur.
• Geliştirerek DB özelliği ekleyebilirsiniz, yüklediğiniz resimlerin bilgilerini DB de saklayarak ilerde sitenizde listeleyebilirsiniz. (v2 de eklendi)
• Kendi yazdığınız uygulamalara entegre ederek zamandan kazanabilir, işlevsel bir özellik katabilirsiniz.
• Geliştirip yeni bir script oluşturabilirsiniz.

V1 Script kurulumu:

Script at çalıştır şeklindedir, ancak upload.php dosyasını açarak, en üstde bulunan bazı ayarları bir kereliğine yapıp kaydetmeniz gerekmektedir. Gerekli açıklamalar değişiklik yapacağınız alanın yanında yapılmıştır.

Ayrıca: index.html dosyasını açarak içerisindeki site linkini değiştirmeniz gerekli.

Bul:

var site_url = "http://demo.makaleci.com/kuaza_jquery_resim_upload";

Değiştir:

var site_url = "http://SITENIZ.com";

*******

V2 Script kurulumu:

1. k_ayarlar.php dosyasını açarak gerekli ayarları ve bilgileri girin
2. Script ile gelen SQL.sql dosyasını oluşturduğunuz veritabanına import edin.
3. Bu kadar..

 

/temp klasörünün chmod ayarını 777 yapmayı unutmayınız.

*******

ChangeLog v1

*** 04/01/2017
* DÜZELTİLDİ: Ekran resmi yapıştırınca yüklerken resim boyutlandırma seçilmiş ise bu özellik çalışmıyordu (resim boyutlandırma)

ChangeLog v2

*** 04/01/2017
* YAYINLANDI..

————————

Scripti geliştirmem bir hayli zaman aldı, bu sebeple emeğe saygı göstermenizi ve kullandığınız yerlerde yada paylaşımlarda, bu sayfaya link vermenizi rica ediyorum. Böylece bu çalışmada yararlandığım kaynaklarında hakkını teslim etmiş oluruz.

Scripti kullanan insanların sitenin bir köşesinde (zorunlu değilsiniz) sitemize link vermenizi yada tanıtım yazısı ile onure etmenizi temenni ediyorum:)

Script kullanımı ile ilgili sormak istediğiniz herşeyi konu altından yorum olarak yazabilirsiniz, aynı gün içerisinde geri dönüş yapılacaktır.