JQUERY Özel Stilli Göz At Butonu

Bu yazımda basit bir şekilde özel stilli göz at yapımını anlatacağım. Kodları olabildiğince sade tuttum böylece kafanız karışmayacaktır

şimdi kodlarımıza geçmeden önce klasör yapımızı göstereceğim klasöt yapımız aşağıdaki gibi olacak

anadizin / index.html

anadizin / css / reset.css

anadizin / css / style.css

anadizin / js / jquery-1.7.2.min.js

anadizin / js / js-fonksiyonlar.js

şimdi tek tek bütün dosyaların içeriğine gelecek olursak

 

anadizin / index.html





Enes Dayanç | Jquery |  Özel Stilli Göz At







Göz At
Lütfen Dosya Seçmek İçin Göz At Butonuna tıklayınız

 

anadizin / css / reset.css

html{color:#000;background:#FFF}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,blockquote,th,td{margin:0;padding:0}table{border-collapse:collapse;border-spacing:0}fieldset,img{border:0}address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:400}ol,ul{list-style:none}caption,th{text-align:left}q:before,q:after{content:''}abbr,acronym{border:0;font-variant:normal}sup{vertical-align:text-top}sub{vertical-align:text-bottom}input,textarea,select{font-family:inherit;font-weight:inherit;font-size:100%}legend{color:#000}#yui3-css-stamp.cssreset{display:none}

 

anadizin / css / style.css

.goz_at{
	width:100px;
	text-align:center;
	background-color:#03F;
	color:#FFF;
	cursor:pointer;
	margin:auto;
	margin-top:20px;
	height:28px;
	padding-top:5px;
	font-size:18px;
}

.secilen_dosya{
	border:1px solid #999;
	width:500px;
	margin:auto;
	margin-top:10px;
	text-align:center;
}

.form{
	width:100px;
	margin:auto;
}

.file{
	display:none;
}

.yukle{
	margin:auto;
	width:100px;
	height:30px;
	margin-top:10px;
	background-color:#03F;
	color:#FFF;
	border:none;
	cursor:pointer;
	display:none;
}

 

anadizin / js / jquery-1.7.2.min.js

http://code.jquery.com/jquery-1.7.2.min.js

 

anadizin / css / js-functions.js

$(document).ready(function () {
$(document).ready(function() {
	var wrapper = $('
').css({height:0,width:0,'overflow':'hidden'}); var fileInput = $(':file').wrap(wrapper); fileInput.change(function(){ $this = $(this); $('.secilen_dosya').html($this.val()); $('#yukle').show(300); }) $('.goz_at').click(function(){ fileInput.click(); }).show(); });

Projenin Çalışır Haline Aşağıdaki Link Üzerinden Erişebilirsiniz :

http://enesdayanc.com/projeler/jquerycustomfileinput/