- Ad
- ZEKİ
- Soyad
- AYGÜN
- Katılım
- 18 Ocak 2019
- Konum
- Yalova
- Konular
- 777
- Mesajlar
- 2,932
- Ticaret - 0%
- Meslek
- Webmaster & SEO
Detay
- Meslek
- Webmaster & SEO
- Tecrübe
- 12 Yıl
- Uzmanlık alanları
- Web tasarım, PHP, SEO, Seslendirme, Video montaj
- İş referanslarım
- youtube.com/channel/UC0EKnd0EWBefw9Wrqw_wrAA
- Üyelik tipi
-
- Bireysel
Hesap-
ZEKİ AYGÜN
HESAP NO; 1237-0056746
ŞUBE: DOSAB BURSA
İBAN: TR69 0004 6012 3788 8000 0567 46
Hesap-
ZEKİ AYGÜN
HESAP NO: 497-6640783
ŞUBE: GEMLİK
İBAN: TR60 0006 2000 4970 0006 6407 83
Photoshop-
- Orta düzey
İllüstratör-
- Başlangıç düzeyi
UI / UX tasarım-
- İleri düzey
PHP-
- Orta düzey
CSS3-
- İleri düzey
JavaScript-
- Orta düzey
jQuery kütüphanesi kullanarak artık resim dosyalarımızı upload etmeden önce görüntülemek ( önizleme ) yapmak mümkündür.
örnek kodlar
örnek kodlar
Kod:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width" />
<title>jQuery - Resim önizleme</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<style>
.upload-preview{
margin:0 auto;
text-align:center;
border:none;
height:200px;
width:100%;
}
.upload-preview img{
max-height:200px;
padding:3px;
border:1px solid #e2e2e2;
}
input.file{
border:none;
margin-top:20px;
}
</style>
</head>
<body>
<div class="clear"></div>
<div id="wrapper" align="center" style="width:980px; min-height:450px; margin-top:10px; font-family:museo-sans-500,helvetica,arial,sans-serif;">
<div id="container" style="width:940px; text-align:center;">
<div class="upload-preview">
</div>
<input class="file" value="Resim Seç" name="logo" type="file">
<script type="text/javascript">
$(document).ready(function(){
var preview = $(".upload-preview");
$(".file").change(function(event){
var input = $(event.currentTarget);
var file = input[0].files[0];
var reader = new FileReader();
reader.onload = function(e){
image_base64 = e.target.result;
preview.append("<img src='"+image_base64+"'/>");
};
reader.readAsDataURL(file);
});
});
</script>
</div>
</div>
</body>
</html>
