JSFiddle - React, Tailwind, and code Playground

by BilisimOgretmeni

HTML

<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/>
					
            </div>

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();
        }
    });
});