php+ajax resim gösterme sonrası yüklemek için

mustafayilmaz28 · 10 Aralık 2014

arkadaşlar,
jquery FileReader() fonksiyonu ile

Kod:

<script type="text/javascript">
$(function(){
    $("#resim_kutu").change(function(){//eğer file değişirse
        var resim=document.getElementById ("resim_kutu");//resime eriş
        if (resim.files && resim.files[0]){//eğer dosya var ise
                var adet=resim.files.length;
                for(var i = 0; i < adet; i++){
					var fotograf = resim.files[i]; 
                    var veri=new FileReader();//veri okuma apisi başlatıyoruz.
                    veri.readAsDataURL(fotograf);
                    veri.onload=function(){
                        var adres=veri.result;//veriyi al
                        var secilenresimler='<div class="resim-kutu"><img src="'+adres+'"/><input type="text" placeholder="Resim açıklaması yazın"/></div>';
                        $('#tum-resim-kutu').append(secilenresimler);//resim olarak çizdir.
                    };             
                };
        };
    });
});
</script>

seçtiğim resim yada resimleri yüklemeden önizlemesini yaptım,(jquery bilgim sınırlı ve nette anlatılan bir örnek)
normalde tek tek seçilen resimleri gösteriyor ama benim eklediğim kodlar ile çoklu seçimdede aynı gösterimi henüz sağlayamadım,
gerçi sorunum daha doğrusu sorum şu,

ben bu seçtiğim resimleri(diyelimki tek tek 10 tane resim seçtim) tum-resim-kutu idli div içinde gösterdikten sonra yükle butonuna bastığımda nasıl yüklerim arkadaşlar,

normal form methodu ile yüklemem bildiğim kadarı ile olmaz, bu resimleri yine jquery ile yüklemem lazım

yani esasen yapmak istediğim form kullanmadan bu resimlerin yolunu alıp($_files değişkenindeki gibi) yukle.php'ye göndermem lazım ki Bu Resimleri form ile seçtirmeden Jquery ile nasıl yaparım?

beyisoy · 10 Aralık 2014

https://blueimp.github.io/jQuery-File-Upload/
bu örnek işinizi görür sanırım

mustafayilmaz28 · 11 Aralık 2014

beyisoy

hocam teşekkürler.
bunu daha önce incelemiştim
yinede incelemeye değer,
fakat,
esasen anlamak ve yazmak adına iki soru var
biri şu phpnin move_uploaded_file komutu $_Fıles['tmp_name'] değerini alıp yükleme yapıyor ya bu değeri nasıl oluşturacağım
ikincisi $_Fıles['tmp_name'] değeri oluşturmadan nasıl yükleme yapcam

aslında aklımın bir köşesinde bununla ilgili query uploaddan bu sorularımın cevabını alabileceğim düşüncesi var ama

mustafayilmaz28 · 23 Aralık 2014

arkadaşlar
şuradaki kod ile çoklu seçilen resimlerin sadece bir tanesini okuyabiliyorum,

Kod:

	function veri(){		
	
		var veri=new FileReader();//jquery dosya bilgi apisini başlat
		veri.onload=function() {//sayfa içinde bulunan (veri.readAsDataURL(resim.files[0]);) kodu ile veri okumayı başlat ve veri okuma başarılı ise
		
			var resimveri=veri.result;//veri okuma fonksiyonundan dönen veriyi al
			var adet=document.getElementById ("resim").files.length;// resim adlı id' den seçilen dosya adedini al
			for(i=0;i<=adet;i++){
			
				var tek_resim='<img src="'+resimveri+'" />';
				$(".resim-kutu").append(tek_resim);
			};
		}
		veri.readAsDataURL(resim.files[0]);//seçilen ilk resme ait bilgileri al
	};

sadece bir tanesini de

Kod:

veri.readAsDataURL(resim.files[0]);//seçilen ilk resme ait bilgileri al

satırdan dolayı okuyorum..
döngü içinde tek tek bu

Kod:

veri.readAsDataURL(resim.files[0]);//seçilen ilk resme ait bilgileri al

fonksiyonu nasıl çağırabilirim?
çağırdığım satır

Kod:

veri.onload=function() {//sayfa içinde bulunan (veri.readAsDataURL(resim.files[0]);) kodu ile veri okumayı başlat ve veri okuma başarılı ise

burası

s_kajmeran · 23 Aralık 2014

Takip etmek istiyorum... ASP'ye uyarlayacağım... Kafamda şimşekler çakıyor...

Şurada da benzer bişey var ama upload işi yok...

impetus23 · 23 Aralık 2014

dosyaları eklerseniz belki gündüz yardımcı olabiliriz.. bu arada

http://designscrazed.org/html5-jquery-f ... d-scripts/

şuradaki örnekleri inceleyebilirsiniz

mustafayilmaz28 · 23 Aralık 2014

s_kajmeran

hocam kafamda ışıklar yandı,şimşekler çaktı ama sönmek üzere

verdiğiniz linkten faydalanmaya çalışıyorum inşallah.

impetus23

hocam,
aslında kodların hepsi bu
artı olarak jQuery kütüphanesi var sadece bi de görsel için css dosyası

beyisoy · 23 Aralık 2014

Bişeyler düzenledim ama
http://jsfiddle.net/BilisimOgretmeni/o1sw6uxg/1/

Kod:

<html>
    <head>		
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
        <script type="text/javascript">
		var adet = 0; //Yüklenen resim sayısı 
		$(document).ready(function() {//Ekle butonuna basınca yeni buton ekliyor..
		$('#ekle').click(function() {
        $(this).before($("<div/>", {id: 'dosyalar'}).append(
                $("<input/>", {name: 'dosyalar[]', type: 'file', id: 'dosya'}),        
                $("<br/><br/>")
                ));    });
	//Farklı bir dosya seçilince çalışacak
				$('body').on('change', '#dosya', function(){
            if (this.files && this.files[0]) {
                 adet += 1; //eklenen dosya sayısını 1 arttırıyoruz				
				var z = adet - 1;
                var x = $(this).parent().find('#eklenenresim' + z).remove();
                $(this).before("<div id='abcd"+ adet +"' class='abcd'><img id='eklenenresim" + adet + "' src='' height='100px' width='100px'/></div>");
               
			    var reader = new FileReader();
                reader.onload = resimgoster;
                reader.readAsDataURL(this.files[0]);
               
			    $(this).hide();
                $("#abcd"+ adet).append($("<img/>", {id: 'img', src: 'x.png', alt: 'sil'}).click(function() {
                $(this).parent().parent().remove();
                }));
            }
        });
		//Resimlerin önizlemesi
    function resimgoster(e) {
        $('#eklenenresim' + adet).attr('src', e.target.result);
    };

    $('#yukle').click(function(e) {
        var name = $(":file").val();
        if (!name)
        {
            alert("Dosya Seçin!!!!");
            e.preventDefault();
        }
    });
});</script>
    <body>  
            <div id="form">
                <h2>Yüklenecek Dosyaları Seçin</h2>
                <form enctype="multipart/form-data" action="" method="post">                
                    <hr/>
                    <div id="dosyalar"><input name="dosyalar[]" type="file" id="dosya"/></div><br/>           
                    <input type="button" id="ekle" class="upload" value="Dosya Ekle"/>
                    <input type="submit" value="Yükle" name="submit" id="upload" class="upload"/>
                </form>
                <br/>
                <br/>
					<?php
				if (isset($_POST['submit'])) {
				$j = 0;
				$nereye_yuklenecek = "images/"; 
				for ($i = 0; $i < count($_FILES['dosyalar']['name']); $i++) {
				$uzantikontrol = array("jpeg", "jpg", "png");  
        $uzanti = explode('.', basename($_FILES['dosyalar']['name'][$i]));
        $dosya_uzantisi = end($uzanti);        
		$nereye_yuklenecek = $nereye_yuklenecek . md5(uniqid()) . "." . $uzanti[count($uzanti) - 1];
        $j = $j + 1;
      
 if (($_FILES["dosyalar"]["size"][$i] < 100000) 
                && in_array($dosya_uzantisi, $uzantikontrol)) {
            if (move_uploaded_file($_FILES['dosyalar']['tmp_name'][$i], $nereye_yuklenecek)) {
                echo $j. ').<span>Dosya Yüklendi!.</span><br/><br/>';
            } else {
                echo $j. ').<span >Tekrar Deneyin</span><br/><br/>';
            }
        } else {
            echo $j. ').<span>Dosya Türü veya Boyuyu Uygun Değil</span><br/><br/>';
        }
    }
}?>
            </div>
       
    </body>
</html>

mustafayilmaz28 · 23 Aralık 2014

beyisoy

hocam teşekkür ederim.
sizin yazdıklarınızda farklı bir yöntem,
ama
ben inanın yöntem değiştirmekten bıktım

şuradaki düzenlememin son halinde tek bir hata kaldı

(o da şimdilik)

Kod:

<!DOCTYPE HTML>
<html lang="en-US">
<head>
	<meta charset="UTF-8">
	<title>jquery-resim-onizle-yukle</title>
	<link rel="stylesheet" type="text/css" href="stil.css" />
	<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
	<script type="text/javascript">
	function verioku(){		
		$('.kabuk').show();
		$('.kabuk').html('');
		var adet=document.getElementById ("resim").files.length;
		$('.kabuk').append('Seçilen Resim Adedi : '+adet+'<br />');
		for(i=0;i<adet;i++){
			var resim = document.getElementById('resim').files[i];
			var verioku=new FileReader();
			verioku.onload=function() {
				var resimverioku=verioku.result;
				$('.kabuk').append('<img src="'+resimverioku+'" width="140" height="140"/>');
			};
			verioku.readAsDataURL(resim);
		}

	};
	</script>
</head>
<body>
		<input type="file" id="resim"  multiple onChange="verioku()"/> <br />
		<div class="kabuk"></div>
</body>
</html>

hata şu;
birden fazla resim seçince sadece ilk yada son resmi hepsinde gösteriyor

beyisoy · 23 Aralık 2014

http://jsfiddle.net/0GiS0/Yvgc2/

mustafayilmaz28 · 23 Aralık 2014

beyisoy

hocam
teşekkür ederim emeklerine,
Allah Razı olsun,
da,
benim kodlarda eksik ne ? :x

anlamadım gitti.

beyisoy · 23 Aralık 2014

Kod:

<!DOCTYPE HTML>
<html lang="en-US">
<head>
   <meta charset="UTF-8">
   <title>jquery-resim-onizle-yukle</title>
   <link rel="stylesheet" type="text/css" href="stil.css" />
  <script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
   <script type="text/javascript">
   function verioku(){      
      $('.kabuk').show();
      $('.kabuk').html('');
      var adet=document.getElementById ("resim").files.length;
      $('.kabuk').append('Seçilen Resim Adedi : '+adet+'<br />');
      for(i=0;i<adet;i++){
         var resim = document.getElementById('resim').files[i];
         var verioku=new FileReader();
         verioku.onload=function(e) {
            var resimverioku= e.target.result;
            $('.kabuk').append('<img src="'+resimverioku+'" width="140" height="140"/>');
         };
         verioku.readAsDataURL(resim);
      }
   };
   </script>
</head>
<body>
      <input type="file" id="resim"  multiple onChange="verioku()"/> <br />
      <div class="kabuk"></div>
</body>
</html>

mustafayilmaz28 · 23 Aralık 2014

teşekkür ederim hocam tekrar Allah razı olsun
yani şuradaki
küçücük ,minnacık bi e :roll:

verioku.onload=function() {
var resimverioku=verioku.result;

yerine

verioku.onload=function(e) {
var resimverioku= e.target.result;

bunu yazdık

tekrar teşekkürler hocam,
böyle böyle javascriptide sökcük en sonunda :tr:

mustafayilmaz28 · 23 Aralık 2014

inşallah en kısa sürede yüklemesinide yaparım tabi

beyisoy · 23 Aralık 2014

mustafayilmaz28' Alıntı:
inşallah en kısa sürede yüklemesinide yaparım tabi

inşallah hocam

buralardayız bekliyoruz...

mustafayilmaz28 · 1 Ocak 2015

aşağıdaki kodda
çoklu resim seçtiğimde

Kod:

<script type="text/javascript">
function fnk(){	
	
	var adet=document.getElementById ("resim_input").files.length;
	for(i=0;i<adet;i++){
	
		var rb=document.getElementById ("resim_input").files[i];
		var rad=document.getElementById ("resim_input").files[i].name;
		
		var verioku=new FileReader();
		verioku.onload=function(e){
			var rever=e.target.result;
		[color=#BFFF00]	[b]alert(rad);
                        alert(i);[/b][/color]
		};
		verioku.readAsDataURL(rb);
	}
};
</script>

kırmızı ve kalın olarak belirttiğim yerde
(örneğin 3 dosya seçtimse hep
üçüncü dosya adı
ve
2(inin son değerini)
)
yazıyor?
nedendiR arkadaşlar

mustafayilmaz28 · 6 Ocak 2015

güncel..

beyisoy · 6 Ocak 2015

hocam dosyayı tam atabilirmisiniz.

mustafayilmaz28 · 6 Ocak 2015

beyisoy' Alıntı:
hocam dosyayı tam atabilirmisiniz.

yükledim hocam
http://jsfiddle.net

beyisoy · 6 Ocak 2015

http://jsfiddle.net/BilisimOgretmeni/sz7nu3dz/

mustafayilmaz28 · 8 Ocak 2015

beyisoy

hocam teşekkür ederim.
inceledim örneği de
bir sıkıntı var ki oda;
sizin örneğinizdeki 8.satırı 17.satıra yazmak istediğimde tek seçmelerde sıkıntısız iken çoklu seçimde hep aynı değerler var,
(döngü dönüyor ki döngü her döndüğünde 8.satırda bulunan rad değişkeninin değerinin değişmesi gerekmezmi?)

php+ajax resim gösterme sonrası yüklemek için

Süper Üye

Ekli dosyalar

Seçkin Üye

Süper Üye

Süper Üye

Hiperaktif Üye

Seçkin Üye

Süper Üye

Seçkin Üye

Süper Üye

Seçkin Üye

Süper Üye

Seçkin Üye

Süper Üye

Süper Üye

Seçkin Üye

Süper Üye

Süper Üye

Seçkin Üye

Süper Üye

Seçkin Üye

Süper Üye