Merhaba arkadaşlar ajax ile resim yükleme konusunu anlatmaya çalışacağım. bildiğiniz üzere aslında ajax ile resim upload yapılamamakta çünkü ajax xmlrequest dili ile çalışıyor birçok makalede karşılaştım ve hazır uygulamalar var onlardada iframe mantığı ile yükletiyorlar fakat ajax bunun üzerine bir kütüphane oluşturmuş olması gerekki araştırmalarım sonuc verdi ve bunu sizlerle paylaşmak istedim şimdi gelelim kullanımına.
1) js kütüphanesini sitenizde kullanmak istediğiniz adreste script tagının src kısmına yapıştırın
https://ismailgultekin.com/demo/ajaxfileupload/ajaxfileupload.js şöyle yazmanız yeterli
Ajax ile sayfa yenilenmeden resim yükleme
Jquery, Ajax ve Php kullanarak yazdığım script umarım faydalı olmuştur.
<-- Geri Dön Whatsapp Mesaj Gönder
Css Kodlarımız ..
#disalan{ width: 800px;text-align:center;margin: 0 auto; } .bglinear{background-image: linear-gradient(180deg, #F16720 0%, #F58907 100%);} #canvas{ font-family:"Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; width: 750px; background-color: #F16720; margin: 0 auto; padding:50px 25px; text-align:center; } #canvas .yuvarlak{ text-align:center; width: 20%; margin: 20px auto 60px auto; } #canvas .yuvarlak h2{font-size:17px;color:#61dafb;font-family:"Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;} #canvas .yuvarlak h2 a{margin: 0 auto;color:#FFF;font-size:18px;font-family:"Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;} #canvas h1{color:#fff;font-size: 17px;text-transform:uppercase;font-family:"Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;margin-bottom: 20px;} #canvas p{color:#fff;font-size: 14px;font-family:"Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;} #capture{padding:7px 10px; background-color:black; font-size:16px;color:white;text-decoration:none;} #snc{ display:none; margin: 0 auto; text-align:center; overflow: hidden; } .alink{ font-size:16px;padding:5px;background-color:red;color:white;text-decoration:none; } #upload_file{text-align: center;} #upload_file input{width: 50%;height: 40px;margin-bottom: 20px;} .inputText { margin-bottom: 20px; font-size: 14px; color: #57c7df; border: 1px solid #57c7df; background-color: #F0F0F0; }
2)saveimg.php adında php dosyası oluşturalım ve içine şu kodları gömelim
//@header('Access-Control-Allow-Origin: *');//Eğer acsess kontrol hatası verirse bunu çalışır hale getirin. $random = "deneme_".rand(100, 1000); $id = $_POST['id']; $ad = addslashes($_POST['ad']); if (isset($_FILES) && !empty($_FILES)) { $file = $_FILES['userfile']; $name = $file['name']; $eyol = $file['tmp_name']; $uzanti = substr($name , -4); $yeniyol = "output/".$random.$uzanti; $savefile = @move_uploaded_file($eyol, $yeniyol); if($savefile){ $status = "Yüklendi"; $dosya = $random.$uzanti; //Eğer veri tabanına kaydedecekseniz. //Post ile gelen -> $ad değişkeni ve resim dosyası $dosya }else{ $status ="Error"; $dosya = 0; } }else{ //echo "Error";//var_dump($_FILES); $status ="Error"; $dosya = 0; } $response = array('status' => $status, 'dosya' => $dosya); echo json_encode($response);
İşte bukadar ben sorunsuz bir şekilde kullanıyorum umarım yardımcı olmuşumdur tek yapmanız gereken resmi ajax ile gönderdiğiniz urlde hangi web dilini kullanıyorsanız ben php belirttim orada upload yaptıracaksınız bir sorun olması halinde yorum yazarsanız yardımcı olmaya çalışırım

Telif Hakkı:
Problemi Şikayet Et!Hasan Gündoğmuş
14:15:16 28.06.2021İsmail bey, merhaba, İnternette, çoklu resim yükleme konusunda tarama yaptım, yapıyorum hala, işime yarayan bir çalışma, proje bulamadım. Çoklu resim yüklemelerin tamamı ajax ve jquery ile oluyor, ancak bu script lerle yüklenen resimler sayfayı refresh yapınca kayboluyor, sunucuda bir klasöre de kaydediyor, ama o kaydolanlar resimler görsel hale gelmeyince bir işe yaramıyor. Örneğin, araba satış ilanlarında 35 adet resim yüklenebiliyor ve gösterilebiliyor, bunun gibi yüklenen resimlerin bir php sayfasında display olmalı, her bir yüklemede çoklu resimler ilgili php sayfalarda kaydolmalı. Bu nasıl oluyo?... İlan sayfalarındaki gibi çoklu resim yüklemeyi nasıl yapabiliriz? Bu konuda yardımcı olursanız ve e-mail ile zahmet olmazsa bilgilendirirseniz çok memnun olurum.. Teşekkürler, Hasan
Yanıtlaismail gültekin
14:55:11 28.06.2021Merhaba Hasan bey, Öncelikle kaybolma olayı resimlerin klasöre veya bir dosya yoluna yüklenirken aynı zamanda veri tabanına kaydedilmesi gerekiyor. Sizin aradığınız tam olarak jquery ajax php multi resim upload ve veri tabanlarına php & mysql olarak yapmalısınız. Tabiki yardımcı olurum.
(İsmail bey, merhaba, İnternette, çoklu resim yükleme konusunda tarama yaptım, yapıyorum hala, işime yarayan bir çalışma, proje bulamadım. Çoklu resim yüklemelerin tamamı ajax ve jquery ile oluyor, ancak bu script lerle yüklenen resimler sayfayı refresh yapınca kayboluyor, sunucuda bir klasöre de kaydediyor, ama o kaydolanlar resimler görsel hale gelmeyince bir işe yaramıyor. Örneğin, araba satış ilanlarında 35 adet resim yüklenebiliyor ve gösterilebiliyor, bunun gibi yüklenen resimlerin bir php sayfasında display olmalı, her bir yüklemede çoklu resimler ilgili php sayfalarda kaydolmalı. Bu nasıl oluyo?... İlan sayfalarındaki gibi çoklu resim yüklemeyi nasıl yapabiliriz? Bu konuda yardımcı olursanız ve e-mail ile zahmet olmazsa bilgilendirirseniz çok memnun olurum.. Teşekkürler, Hasan )
YanıtlaHAKKIMDA
Yazılım Uzmanlığı konusunda 11 yılı aşkın süredir Türkiye'de Cumhurbaşkanlığı olmak üzere Kurumlara ve Tüzel kişilere; Yön verme, Yücelik Sağlama ve Büyüme gereksinimlerinden doğan Yazılım ihtiyaclarına çözümler sunmaktayım.
<html>
<body>
<h5>
Yazılım
&
Teknoloji
</h5>
<p>
Dünyasına
Hoş Geldiniz.
</p>
</body>
</html>
Son Eklenen Konular
Nginx Nedir, Nasıl Çalışır, Kurulumu, Hata ve Çözümü
03 Haziran, 2022
Web Site | Web Tasarım | Web Yazılım
27 Nisan, 2022
Html URL ASCII Karakter kodları
04 Mart, 2022
Jquery Alert, Sweet alert, Dialog Kullanımı
03 Mart, 2022
Doğal Seo Çalışması Nasıl Yapılır?
19 Şubat, 2022
En Çok Okunanlar
Google api key nasıl alınır?
26 Eylül, 2013
Youtube Video'sunu Gif Yapma Gif'e Çevirme
17 Ağustos, 2013
linux çeşitleri nelerdir?
13 Ağustos, 2013
Php ile bot nasıl yapılır?
22 Eylül, 2013
Ajax ile sayfa yenilenmeden resim yükleme nasıl yapılır?
04 Ekim, 2013
İlgili İçerikler
-
03 Mart, 2022 1755
Jquery Alert, Sweet alert, Dialog Kullanımı
-
28 Eylül, 2013 7637
jQuery ile sayfa yenilenmeden nasıl post gönderebilirim?
-
26 Eylül, 2013 3827
jQuery animate() Metodu nasıl kullanılır?
-
25 Eylül, 2013 2288
jquery ölcü fonksiyonları nelerdir?
-
09 Ağustos, 2013 3774
jquery mouseenter ve mouseleave nasıl kullanılır?
-
09 Ağustos, 2013 3328
jquery addclass ve css metodları nasıl kullanılır?
Cem B.
23:42:03 03.12.2021