Emre Yüz


PHP ve jQuery ile Kopyala Yapıştır Yaparak Resim Yükleme

PHP ve jQuery ile Chrome, Firefox veya Safari'de (IE'de çalışmıyor) panoya kopyalanan resimleri basit bir şekilde server'a upload etme.

PHP ve jQuery ile Kopyala Yapıştır Yaparak Resim Yükleme

By Emre YÜZ
25.02.2017 21.04



php jquery pasteimage kopyala yapıştır resim yükleme

Bu yazımızda bir resim yükleme servisi için yazdığım PHP ve jQuery ile Chrome, Firefox veya Safari'de (IE'de çalışmıyor) panoya kopyalanan resimleri basit bir şekilde server'a upload edilmesini sağlayan kodları göstereceğim.

Sayfamıza jQuery kütüphanesini ekledikten sonra bu github adresindeki pasteimage.js dosyasını indirerek sayfamıza dahil ediyoruz. Vladmalik dostumuzun yazdığı kodlar kopyalanan resmi img etiketine aktararak sayfada gösterilmesini sağlıyor.

Bizde buna ek olarak jQuery tarafında tutulan base64 verisini resim yapıştırıldığı andaform elemanımızın value kısmına gönderiyoruz. Böylece yüklenecek resim forma eklenmiş oluyor ardından yükle butonuna tıkladığınızda resim yüklenmiş oluyor.

Bunun bize faydası, kullanıcı bir resmi önce bilgisayarına indirmeden tarayıcı üzerinde kopyalarak direk yüklemesini sağlıyor.

1. Adım

Bu adımda resim yüklemek için formumuzu oluşturuyoruz. Sayfamıza dahil ettiğimiz pasteimage.js ile sayfa bir resim yapıştırıldığında bunu formun url elemanının değerine aktarıyoruz ve resmin ön izlemesini sayfada gösteriyoruz.

<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="pasteimage.js"></script>
<script>
function paste(src) {
    $(document.body).append("<img src='" + src + "'>");
    $("#url").val(src);
}
$(function() {
    $.pasteimage(paste);
});
</script>

    <form action="" method="post">
    <input type="hidden" id="url" name="url" />
    <input type="submit" name="submit" value="Yükle" />
    </form>

2. Adım

Form post edildikten sonra resimlerimiz base64 verisi olacağı için direk yüklemeye kalkarsak hata verecektir o yüzden veriyi explode ile parçalayarak data:image/png;base64 veya data:image/jpg;base64 değerlerinden sonraki resim verilerini kullanıyoruz. Ayrıca resimlerin karışmaması için rastgele bir isim ekleyerek resmi uploads klasörüne yüklüyoruz.

<?php
if($_POST)
{
    $url = $_POST["url"];
    $parcala = explode(',', $url);
    $veri = base64_decode($parcala[1]); 
    $resim = imagecreatefromstring($veri);
    $rastgele = md5(microtime());
    $isim = substr($rastgele, 0, 3);
    $isim .= date('d.m.Y');
    $isim .= '.jpg';
    imagejpeg($resim, 'uploads/'.$isim, 100);
}
?>

Yapacaklarımız bu kadar. Oldukça kullanıcı dostu bir uygulama. Sorularınızı yorum olarak çekinmeden sorabilirsiniz. Başka bir yazıda görüşmek üzere.



Emre Yüz
Emre YÜZ
Multidisipliner Full-Stack Web Geliştirici/Tasarımcı, Veri
Mimarı ve Analist.

Multidisipliner Full-Stack Web Geliştirici/Tasarımcı, Veri Mimarı ve Analist.



HAKKIMDA

Emre YÜZ

Multidisipliner Full-Stack Web Geliştirici/Tasarımcı, Veri Mimarı ve Analist.

Son Yazılar

insta ❤️ feed


    Reklam