Kategori: JS, JQUERY

Mobil Cihaz Tespiti

Php ile

<?php 
function isMobile() {
    return preg_match("/(android|avantgo|blackberry|bolt|boost|cricket|docomo|fone|hiptop|mini|mobi|palm|phone|pie|tablet|up.browser|up.link|webos|wos)/i", $_SERVER["HTTP_USER_AGENT"]);
}
if(isMobile()){
 header('Location: http://localhost/mobil');
}
?>

Javascript ile

(function(a,b){if(/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino/i.test(a)||/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(a.substr(0,4)))window.location=b})(navigator.userAgent||navigator.vendor||window.opera,'http://localhost/mobil');

 

Gelişmiş Hesap Makinesi

<HTML>
<HEAD>
<TITLE>JavaScript Gelismis Hesap Makinesi</TITLE>
<SCRIPT LANGUAGE='JavaScript'>
var displayText = ""
var num1
var num2
var operatorType

// Write to display
function addDisplay(n){
document.calc.display.value = ""
displayText += n
document.calc.display.value = displayText
}

// Addition
function addNumbers() {
if (displayText == "") {
  displayText = result
 }
num1 = parseFloat(displayText)
operatorType = "add"
displayText = ""
}

// Subtraction
function subtractNumbers() {
if (displayText == "") {
  displayText = result
 }
num1 = parseFloat(displayText)
operatorType = "subtract"
displayText = ""
}

// Multiplication
function multiplyNumbers() {
if (displayText == "") {
  displayText = result
 }
num1 = parseFloat(displayText)
operatorType = "multiply"
displayText = ""
}

// Division
function divideNumbers() {
if (displayText == "") {
  displayText = result
 }
num1 = parseFloat(displayText)
operatorType = "divide"
displayText = ""
}

// Sine
function sin() {
if (displayText == "") {
  num1 = result
  }
else {
  num1 = parseFloat(displayText)
  }
if (num1 != "") {
  result = Math.sin(num1)
  document.calc.display.value = result
  displayText = ""
  }
else {
  alert("Önce bir numara yazınız")
  }
}

// Cosine
function cos() {
if (displayText == "") {
  num1 = result
  }
else {
  num1 = parseFloat(displayText)
  }
if (num1 != "") {
  result = Math.cos(num1)
  document.calc.display.value = result
  displayText = ""
  }
else {
  alert("Önce bir numara yazınız")
  }
}

// ArcSine
function arcSin() {
if (displayText == "") {
  num1 = result
  }
else {
  num1 = parseFloat(displayText)
  }
if (num1 != "") {
  result = Math.asin(num1)
  document.calc.display.value = result
  displayText = ""
  }
else {
  alert("Önce bir numara yazınız")
  }
}

// ArcCosine
function arcCos() {
if (displayText == "") {
  num1 = result
  }
else {
  num1 = parseFloat(displayText)
  }
if (num1 != "") {
  result = Math.acos(num1)
  document.calc.display.value = result
  displayText = ""
  }
else {
  alert("Önce bir numara yazınız")
  }
}

// Square root
function sqrt() {
if (displayText == "") {
  num1 = result
  }
else {
  num1 = parseFloat(displayText)
  }
if (num1 != "") {
  result = Math.sqrt(num1)
  document.calc.display.value = result
  displayText = ""
  }
else {
  alert("Önce bir numara yazınız")
  }
}

// Square number (number to the power of two)
function square() {
if (displayText == "") {
  num1 = result
  }
else {
  num1 = parseFloat(displayText)
  }
if (num1 != "") {
  result = num1 * num1
  document.calc.display.value = result
  displayText = ""
  }
else {
  alert("Önce bir numara yazınız")
  }
}

// Convert degrees to radians
function degToRad() {
if (displayText == "") {
  num1 = result
  }
else {
  num1 = parseFloat(displayText)
  }
if (num1 != "") {
  result = num1 * Math.PI / 180
  document.calc.display.value = result
  displayText = ""
  }
else {
  alert("Önce bir numara yazınız")
  }
}

// Convert radians to degrees
function radToDeg() {
if (displayText == "") {
  num1 = result
  }
else {
  num1 = parseFloat(displayText)
  }
if (num1 != "") {
  result = num1 * 180 / Math.PI
  document.calc.display.value = result
  displayText = ""
  }
else {
  alert("Önce bir numara yazınız")
  }
}

// Calculations
function calculate() {
if (displayText != "") {
  num2 = parseFloat(displayText)
// Calc: Addition
  if (operatorType == "add") {
    result = num1 + num2
    document.calc.display.value = result
    }
// Calc: Subtraction
  if (operatorType == "subtract") {
    result = num1 - num2
    document.calc.display.value = result
    }
// Calc: Multiplication
  if (operatorType == "multiply") {
    result = num1 * num2
    document.calc.display.value = result
    }
// Calc: Division
  if (operatorType == "divide") {
    result = num1 / num2
    document.calc.display.value = result
    }
  displayText = ""
  }
  else {
  document.calc.display.value = "Hata!"
  }
}
function clearDisplay() {
displayText = ""
document.calc.display.value = ""
}
</SCRIPT>
</HEAD>
<BODY BGCOLOR="#FFFFFF" LINK="#9C6060">

<TABLE>
<TD> 
<TABLE BORDER=0 BGCOLOR="#AF9999">
<TD>
<TABLE border="0" cellpadding="2" cellspacing="2">
<FORM NAME=calc>
<TR>
	<TD COLSPAN=5><INPUT TYPE=text SIZE=22 NAME=display></TD>
<TR align="left" valign="middle">
	<TD><INPUT TYPE=button NAME="one" VALUE="   1   " onClick=addDisplay(1)></TD>
	<TD><INPUT TYPE=button NAME="two" VALUE="   2   " onClick=addDisplay(2)></TD>
	<TD><INPUT TYPE=button NAME="three" VALUE="   3   " onClick=addDisplay(3)></TD>
	<TD><INPUT TYPE=button NAME="plus" VALUE="   +   " onClick=addNumbers()></TD>
<TR align="left" valign="middle">
	<TD><INPUT TYPE=button NAME="four" VALUE="   4   " onClick=addDisplay(4)></TD>
	<TD><INPUT TYPE=button NAME="five" VALUE="   5   " onClick=addDisplay(5)></TD>
	<TD><INPUT TYPE=button NAME="six" VALUE="   6   " onClick=addDisplay(6)></TD>
	<TD><INPUT TYPE=button NAME="minus" VALUE="   -   " onClick=subtractNumbers()></TD>
<TR align="left" valign="middle">
	<TD><INPUT TYPE=button NAME="seven" VALUE="   7   " onClick=addDisplay(7)></TD>
	<TD><INPUT TYPE=button NAME="eight" VALUE="   8   " onClick=addDisplay(8)></TD>
	<TD><INPUT TYPE=button NAME="nine" VALUE="   9   " onClick=addDisplay(9)></TD>
	<TD><INPUT TYPE=button NAME="multiplication" VALUE="   *     " onClick=multiplyNumbers()></TD>
<TR align="left" valign="middle">
	<TD><INPUT TYPE=button NAME="zero" VALUE="   0   " onClick=addDisplay(0)></TD>
	<TD><INPUT TYPE=button NAME="pi" VALUE = "  Pi   " onClick=addDisplay(Math.PI)> </TD> 
	<TD><INPUT TYPE=button NAME="dot" VALUE="   .   " onClick=addDisplay(".")></TD>
	<TD><INPUT TYPE=button NAME="division" VALUE="   /   " onClick=divideNumbers()></TD>
<TR align="left" valign="middle">
	<TD><INPUT TYPE=button NAME="sqareroot" VALUE="sqrt" onClick=sqrt()></TD>
	<TD><INPUT TYPE=button NAME="squarex" VALUE=" x^2" onClick=square()></TD>
	<TD><INPUT TYPE=button NAME="deg-rad" VALUE="d2r  " onClick=degToRad()></TD>
	<TD><INPUT TYPE=button NAME="rad-deg" VALUE="r2d  " onClick=radToDeg()></TD>
<TR align="left" valign="middle">
	<TD><INPUT TYPE=button NAME="sine" VALUE="  sin  " onClick=sin()></TD>
	<TD><INPUT TYPE=button NAME="arcsine" VALUE="asin" onClick=arcSin()></TD>
	<TD><INPUT TYPE=button NAME="cosine" VALUE="cos" onClick=cos()></TD>
	<TD><INPUT TYPE=button NAME="arccosine" VALUE="acs" onClick=arcCos()></TD>

<TR align="left" valign="middle">
	<TD COLSPAN=2><INPUT TYPE=button NAME=clear VALUE="   Temizle   " onClick=clearDisplay()></TD>
	<TD COLSPAN=3><INPUT TYPE=button NAME=enter VALUE="      =      " onClick=calculate()></TD>

</TABLE>
</TABLE>


</TABLE>
</BODY>
</HTML>

 

Google Map Koordinat Bulucu

<?php

if($_POST){
print_r($_POST);
exit;
}
?>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Google Maps JavaScript API v3 Example: Map Simple</title>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&libraries=places"></script>
<script type="text/javascript">
  
  var placeSearch,autocomplete;
  var component_form = {
    'street_number': 'short_name',
    'route': 'long_name',
    'locality': 'long_name',
    'country': 'long_name',
    'postal_code': 'short_name'
  };
  
  function initialize() {
    autocomplete = new google.maps.places.Autocomplete(document.getElementById('autocomplete'), { types: [ 'geocode' ] });
    google.maps.event.addListener(autocomplete, 'place_changed', function() {
      fillInAddress();
    });
  }
  
  function fillInAddress() {
    var place = autocomplete.getPlace();
	var lat = place.geometry.location.lat();
	var lng = place.geometry.location.lng();
    for (var component in component_form) {
      document.getElementById(component).value = "";
      document.getElementById(component).disabled = false;
	document.getElementById("long").value = lng;
	document.getElementById("lat").value = lat;
    }
    
    for (var j = 0; j < place.address_components.length; j++) {
      var att = place.address_components[j].types[0];
      if (component_form[att]) {
        var val = place.address_components[j][component_form[att]];
        document.getElementById(att).value = val;
      }
    }
  }
    
  function geolocate() {
    if (navigator.geolocation) {
      navigator.geolocation.getCurrentPosition(function(position) {
        var geolocation = new google.maps.LatLng(position.coords.latitude,position.coords.longitude);
        autocomplete.setBounds(new google.maps.LatLngBounds(geolocation, geolocation));
      });
    }
  }

</script>
</head>
<body onload="initialize()">
	
  <div id="locationField">
    <input id="autocomplete" placeholder="Adresinizi Giriniz" onFocus="geolocate()" type="text"></input>
  </div>
  <form action="streetfindexportinput.php" method="post">
	Sokak No:<input id="street_number" disabled="true"/><br>
	Güzergah:<input id="route" disabled="true"/><br>
    Semt:<input id="locality" disabled="true"/><br>
    Posta<input id="postal_code" disabled="true"/><br>
    Ülke<input id="country" disabled="true"/><br>
    <input type="hidden" name="lng"  id="long" />
    <input type="hidden" name="lat"  id="lat" />
   <button type="submit">Gönder</button>
	</form>
	
  </body>
</html>

 

Google Map Arama ve Marker Ekleme

 

<title>Google Maps JavaScript API v3 Example: Map Simple</title>
<?php
if($_POST){
?>
<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title></title>
  <script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'></script>
  <script type='text/javascript' src="http://maps.google.com/maps/api/js?sensor=true&.js"></script>
  <script type='text/javascript' src="https://raw.github.com/HPNeo/gmaps/master/gmaps.js"></script>
  <style type='text/css'>
    html,
body,
#map {
    display: block;
    width: 70%;
    height: 90%;
}
  </style>
<script type='text/javascript'>//<![CDATA[ 
$(function(){
    
    var options = {
      center : new google.maps.LatLng(<?php echo $_POST["lat"]; ?>, <?php echo $_POST["lng"]; ?>),
      zoom : 15
    };
	
    var div = document.getElementById('map');
    var map = new google.maps.Map(div, options);
    var marker = new google.maps.Marker({
        position: new google.maps.LatLng(<?php echo $_POST["lat"]; ?>,<?php echo $_POST["lng"]; ?>),
        map: map,
        title: ''
    });

});
//]]></script>

</head>
<body>
  <div id="map"></div>
</body>
</html>
<?php
}else{
?>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&libraries=places"></script>
<script type="text/javascript">
  
  var placeSearch,autocomplete;
  var component_form = {
'street_address' : 'long_name',
'route' : 'long_name',//sadece sokak varsa
'country' : 'long_name',//ülke
'administrative_area_level_1' : 'long_name',//il
'administrative_area_level_2' : 'long_name',//ilçe
'administrative_area_level_3' : 'long_name',
'locality' : 'long_name',//il
'sublocality' : 'long_name',//alt bölge
'neighborhood' : 'long_name',//sadece ilçe varsa
'postal_code' : 'long_name',//posta kodu
'street_number' : 'long_name'
  };
  
  function initialize() {
    autocomplete = new google.maps.places.Autocomplete(document.getElementById('autocomplete'), { types: [ 'geocode' ] });
    google.maps.event.addListener(autocomplete, 'place_changed', function() {
      fillInAddress();
    });
  }
  
  function fillInAddress() {
    var place = autocomplete.getPlace();
	var lat = place.geometry.location.lat();
	var lng = place.geometry.location.lng();
	
	var name = place.name;
    var phone = place.formatted_phone_number;
    var fullAddress = place.formatted_address;

    for (var component in component_form) {
      document.getElementById(component).value = "";
      document.getElementById(component).disabled = false;
	document.getElementById("long").value = lng;
	document.getElementById("lat").value = lat;
	document.getElementById("fa").value = fullAddress;
	
    }
    
    for (var j = 0; j < place.address_components.length; j++) {
      var att = place.address_components[j].types[0];
      if (component_form[att]) {
        var val = place.address_components[j][component_form[att]];
        document.getElementById(att).value = val;
      }
    }
  }
    
  function geolocate() {
    if (navigator.geolocation) {
      navigator.geolocation.getCurrentPosition(function(position) {
        var geolocation = new google.maps.LatLng(position.coords.latitude,position.coords.longitude);
        autocomplete.setBounds(new google.maps.LatLngBounds(geolocation, geolocation));
      });
    }
  }

</script>
</head>
<body onload="initialize()">
	
  <div id="locationField">
    <input id="autocomplete" placeholder="Adresinizi Giriniz" onFocus="geolocate()" type="text"></input>
  </div>
  <form action="" method="post">
	Full Adres:<input id="fa" name="fa"/><br>
Cadde<input id="street_address" disabled="true"/><br>
Sokak<input id="route" disabled="true"/><br>
Ülke<input id="country" disabled="true"/><br>
İl<input id="administrative_area_level_1" disabled="true"/><br>
İlçe<input id="administrative_area_level_2" disabled="true"/><br>
Köy<input id="administrative_area_level_3" disabled="true"/><br>
Bölge<input id="locality" disabled="true"/><br>
Alt Bölge<input id="sublocality" disabled="true"/><br>
Mahalle<input id="neighborhood" disabled="true"/><br>
Posta<input id="postal_code" disabled="true"/><br>
Sokak No<input id="street_number" disabled="true"/><br>

Enlem<input type="text" name="lat"  id="lat" /><br>
Boylam<input type="text" name="lng"  id="long" /><br>
   <button type="submit">Gönder</button>
	</form>
	
  </body>
</html>
<?php } ?>

 

Eski Tarayıcılarda HTML5 Kullanabilmek

script tagı içerisinde bu kodları ekliyoruz

 (function(l,f){function m(){var a=e.elements;return"string"==typeof a?a.split(" "):a}function i(a){var b=n[a[o]];b||(b={},h++,a[o]=h,n[h]=b);return b}function p(a,b,c){b||(b=f);if(g)return b.createElement(a);c||(c=i(b));b=c.cache[a]?c.cache[a].cloneNode():r.test(a)?(c.cache[a]=c.createElem(a)).cloneNode():c.createElem(a);return b.canHaveChildren&&!s.test(a)?c.frag.appendChild(b):b}function t(a,b){if(!b.cache)b.cache={},b.createElem=a.createElement,b.createFrag=a.createDocumentFragment,b.frag=b.createFrag(); a.createElement=function(c){return!e.shivMethods?b.createElem(c):p(c,a,b)};a.createDocumentFragment=Function("h,f","return function(){var n=f.cloneNode(),c=n.createElement;h.shivMethods&&("+m().join().replace(/w+/g,function(a){b.createElem(a);b.frag.createElement(a);return'c("'+a+'")'})+");return n}")(e,b.frag)}function q(a){a||(a=f);var b=i(a);if(e.shivCSS&&!j&&!b.hasCSS){var c,d=a;c=d.createElement("p");d=d.getElementsByTagName("head")[0]||d.documentElement;c.innerHTML="x<style>article,aside,figcaption,figure,footer,header,hgroup,main,nav,section{display:block}mark{background:#FF0;color:#000}</style>"; c=d.insertBefore(c.lastChild,d.firstChild);b.hasCSS=!!c}g||t(a,b);return a}var k=l.html5||{},s=/^<|^(?:button|map|select|textarea|object|iframe|option|optgroup)$/i,r=/^(?:a|b|code|div|fieldset|h1|h2|h3|h4|h5|h6|i|label|li|ol|p|q|span|strong|style|table|tbody|td|th|tr|ul)$/i,j,o="_html5shiv",h=0,n={},g;(function(){try{var a=f.createElement("a");a.innerHTML="<xyz></xyz>";j="hidden"in a;var b;if(!(b=1==a.childNodes.length)){f.createElement("a");var c=f.createDocumentFragment();b="undefined"==typeof c.cloneNode|| "undefined"==typeof c.createDocumentFragment||"undefined"==typeof c.createElement}g=b}catch(d){g=j=!0}})();var e={elements:k.elements||"abbr article aside audio bdi canvas data datalist details figcaption figure footer header hgroup main mark meter nav output progress section summary time video",version:"3.6.2",shivCSS:!1!==k.shivCSS,supportsUnknownElements:g,shivMethods:!1!==k.shivMethods,type:"default",shivDocument:q,createElement:p,createDocumentFragment:function(a,b){a||(a=f);if(g)return a.createDocumentFragment(); for(var b=b||i(a),c=b.frag.cloneNode(),d=0,e=m(),h=e.length;d<h;d++)c.createElement(e[d]);return c}};l.html5=e;q(f)})(this,document);

sayfa kodlarınızı ekleyerek test edebilirsiniz.

 <header>ulusanyazilim.com</header>
    <nav>Anasayfa</nav>
    <article>
        <section>
            HTML5
        </section>
    </article>
    <aside>
        Reklamlar
    </aside>
 <footer>Copyright</footer>

 

Eski Tarayıcılar için Placeholder Kullanımı

Öncelikle jquery kütüphanemizi script tagı ile çağırıyoruz.

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

script tagı içerisine kodlarımızı yazıyoruz.

;(function(window, document, $) {

    var isInputSupported = 'placeholder' in document.createElement('input');
    var isTextareaSupported = 'placeholder' in document.createElement('textarea');
    var prototype = $.fn;
    var valHooks = $.valHooks;
    var propHooks = $.propHooks;
    var hooks;
    var placeholder;

    if (isInputSupported && isTextareaSupported) {

        placeholder = prototype.placeholder = function() {
            return this;
        };

        placeholder.input = placeholder.textarea = true;

    } else {

        placeholder = prototype.placeholder = function() {
            var $this = this;
            $this
                .filter((isInputSupported ? 'textarea' : ':input') + '[placeholder]')
                .not('.placeholder')
                .bind({
                    'focus.placeholder': clearPlaceholder,
                    'blur.placeholder': setPlaceholder
                })
                .data('placeholder-enabled', true)
                .trigger('blur.placeholder');
            return $this;
        };

        placeholder.input = isInputSupported;
        placeholder.textarea = isTextareaSupported;

        hooks = {
            'get': function(element) {
                var $element = $(element);

                var $passwordInput = $element.data('placeholder-password');
                if ($passwordInput) {
                    return $passwordInput[0].value;
                }

                return $element.data('placeholder-enabled') && $element.hasClass('placeholder') ? '' : element.value;
            },
            'set': function(element, value) {
                var $element = $(element);

                var $passwordInput = $element.data('placeholder-password');
                if ($passwordInput) {
                    return $passwordInput[0].value = value;
                }

                if (!$element.data('placeholder-enabled')) {
                    return element.value = value;
                }
                if (value == '') {
                    element.value = value;
                    // Issue #56: Setting the placeholder causes problems if the element continues to have focus.
                    if (element != document.activeElement) {
                        // We can't use `triggerHandler` here because of dummy text/password inputs :(
                        setPlaceholder.call(element);
                    }
                } else if ($element.hasClass('placeholder')) {
                    clearPlaceholder.call(element, true, value) || (element.value = value);
                } else {
                    element.value = value;
                }
                // `set` can not return `undefined`; see http://jsapi.info/jquery/1.7.1/val#L2363
                return $element;
            }
        };

        if (!isInputSupported) {
            valHooks.input = hooks;
            propHooks.value = hooks;
        }
        if (!isTextareaSupported) {
            valHooks.textarea = hooks;
            propHooks.value = hooks;
        }

        $(function() {
            // Look for forms
            $(document).delegate('form', 'submit.placeholder', function() {
                // Clear the placeholder values so they don't get submitted
                var $inputs = $('.placeholder', this).each(clearPlaceholder);
                setTimeout(function() {
                    $inputs.each(setPlaceholder);
                }, 10);
            });
        });

        // Clear placeholder values upon page reload
        $(window).bind('beforeunload.placeholder', function() {
            $('.placeholder').each(function() {
                this.value = '';
            });
        });

    }

    function args(elem) {
        // Return an object of element attributes
        var newAttrs = {};
        var rinlinejQuery = /^jQueryd+$/;
        $.each(elem.attributes, function(i, attr) {
            if (attr.specified && !rinlinejQuery.test(attr.name)) {
                newAttrs[attr.name] = attr.value;
            }
        });
        return newAttrs;
    }

    function clearPlaceholder(event, value) {
        var input = this;
        var $input = $(input);
        if (input.value == $input.attr('placeholder') && $input.hasClass('placeholder')) {
            if ($input.data('placeholder-password')) {
                $input = $input.hide().next().show().attr('id', $input.removeAttr('id').data('placeholder-id'));
                // If `clearPlaceholder` was called from `$.valHooks.input.set`
                if (event === true) {
                    return $input[0].value = value;
                }
                $input.focus();
            } else {
                input.value = '';
                $input.removeClass('placeholder');
                input == document.activeElement && input.select();
            }
        }
    }

    function setPlaceholder() {
        var $replacement;
        var input = this;
        var $input = $(input);
        var id = this.id;
        if (input.value == '') {
            if (input.type == 'password') {
                if (!$input.data('placeholder-textinput')) {
                    try {
                        $replacement = $input.clone().attr({ 'type': 'text' });
                    } catch(e) {
                        $replacement = $('<input>').attr($.extend(args(this), { 'type': 'text' }));
                    }
                    $replacement
                        .removeAttr('name')
                        .data({
                            'placeholder-password': $input,
                            'placeholder-id': id
                        })
                        .bind('focus.placeholder', clearPlaceholder);
                    $input
                        .data({
                            'placeholder-textinput': $replacement,
                            'placeholder-id': id
                        })
                        .before($replacement);
                }
                $input = $input.removeAttr('id').hide().prev().attr('id', id).show();
                // Note: `$input[0] != input` now!
            }
            $input.addClass('placeholder');
            $input[0].value = $input.attr('placeholder');
        } else {
            $input.removeClass('placeholder');
        }
    }

}(this, document, jQuery));

sayfa kodlarımızı ekliyoruz

<form>
    <input id="input" name="" type="text" placeholder="Birşeyler Arayın.."/>
</form>

en alta script tagı içerisine kodlarımızı ekliyoruz.

 $(function() {
        $('input, textarea').placeholder();
        var html;
        if ($.fn.placeholder.input && $.fn.placeholder.textarea) {
         html = '<strong>Your current browser natively supports <code>placeholder</code> for <code>input</code> and <code>textarea</code> elements.</strong> The plugin won’t run in this case, since it’s not needed. If you want to test the plugin, use an older browser ;)';
        } else if ($.fn.placeholder.input) {
         html = '<strong>Your current browser natively supports <code>placeholder</code> for <code>input</code> elements, but not for <code>textarea</code> elements.</strong> The plugin will only do its thang on the <code>textarea</code>s.';
        }
        if (html) {
         $('<p class="note">' + html + '</p>').insertAfter('form');
        }
     });

 

Responsive Modal Box

Hazır kütüphaneler kullanmadan yapabileceğiniz bir uyumlu açılır pencere çalışması.

Sayfamıza ilk olarak uyumlu olması için metaları ekleyelim

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1">

style tagı içerisine kodlarımızı ekleyelim.

.kalici-kaplama {
  position: fixed;
  z-index: 9998;
  top: 0;
  left: 0;
  opacity: 0;
  width: 100%;
  height: 100%;
  -webkit-transition: 1ms opacity ease;
  -moz-transition: 1ms opacity ease;
  -ms-transition: 1ms opacity ease;
  -o-transition: 1ms opacity ease;
  transition: 1ms opacity ease;
  background: rgba(0,0,0,.6);
}
.kalici-kalici {
  position: fixed;
  z-index: 9999;
  top: 50%;
  left: 50%;
  opacity: 0;
  width: 94%;
  padding: 24px 20px;
  -webkit-transition: 1ms opacity ease;
  -moz-transition: 1ms opacity ease;
  -ms-transition: 1ms opacity ease;
  -o-transition: 1ms opacity ease;
  transition: 1ms opacity ease;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  border-radius: 2px;
  background: #fff;
}
.kalici-kalici.kalici-acik.kalici-baglantili {
  top: 20px;
  -webkit-transform: translate(-50%, 0);
  -moz-transform: translate(-50%, 0);
  -ms-transform: translate(-50%, 0);
  -o-transform: translate(-50%, 0);
  transform: translate(-50%, 0);
}
.kalici-kalici.kalici-acik { opacity: 1; }
.kalici-kaplama.kalici-acik { opacity: 1; }
.kalici-kapat {
  font-family: Helvetica, Arial, sans-serif;
  font-size: 24px;
  font-weight: 700;
  line-height: 12px;
  position: absolute;
  top: 5px;
  right: 5px;
  padding: 5px 7px 7px;
  cursor: pointer;
  color: #fff;
  border: 0;
  outline: none;
  background: #e74c3c;
}
.kalici-kapat:hover { background: #c0392b; }
.kalici-kaplama.karart-ve-kaldir {
  display: block;
  opacity: 0;
}
.kalici-kalici.karart-ve-kaldir {
  top: -300%;
  opacity: 1;
  display: block;
}
.kalici-kalici.karart-ve-kaldir.kalici-acik {/*kararmadan sonra kalici çıkış*/
  top: 50%;
  -webkit-transition: 500ms top 1ms ease;
  -moz-transition: 500ms top 1ms ease;
  -ms-transition: 500ms top 1ms ease;
  -o-transition: 500ms top 1ms ease;
  transition: 500ms top 1ms ease;
}
.kalici-kalici.karart-ve-kaldir.kalici-acik.kalici-baglantili {
  -webkit-transition: 500ms top 500ms ease;
  -moz-transition: 500ms top 500ms ease;
  -ms-transition: 500ms top 500ms ease;
  -o-transition: 500ms top 500ms ease;
  transition: 500ms top 500ms ease;
}
.kalici-kaplama.karart-ve-kaldir.kalici-acik {/*arka plan kararış*/
  top: 0;
  -webkit-transition: 100ms opacity ease;
  -moz-transition: 100ms opacity ease;
  -ms-transition: 100ms opacity ease;
  -o-transition: 100ms opacity ease;
  transition: 100ms opacity ease;
  opacity: 1;
}
.kalici-kalici.karart-ve-kaldir {
  -webkit-transition: 500ms top ease;
  -moz-transition: 500ms top ease;
  -ms-transition: 500ms top ease;
  -o-transition: 500ms top ease;
  transition: 500ms top ease;
}
.kalici-kaplama.karart-ve-kaldir {/*arka plan kararış iptal*/
  -webkit-transition: 100ms opacity 100ms ease;
  -moz-transition: 100ms opacity 100ms ease;
  -ms-transition: 100ms opacity 100ms ease;
  -o-transition: 100ms opacity 100ms ease;
  transition: 100ms opacity 100ms ease;
}

script tagı içerisine kodlarımızı ekleyelim.

	(function() {
	  this.Kalici = function() {
	    this.kaplama = null;
	    this.kalici = null;
	    this.kapatButonu = null;
	    this.gecisSonu = gecisSec();
	    var varsayilan = {
	      className: 'karart-ve-kaldir',
	      kapatButonu: true,
	      icerik: "",
	      maxWidth: 600,
	      minWidth: 280,
	      kaplama: true
	    }
	    if (arguments[0] && typeof arguments[0] === 'object') {
	      this.ayarlar = varsayilanEk(varsayilan, arguments[0]);
	    }
	  }
	  Kalici.prototype.acik = function() {
	    olusturma.call(this);
	    initializeEvents.call(this);
	    window.getComputedStyle(this.kalici).height;
	    this.kalici.className = this.kalici.className +
	      (this.kalici.offsetHeight > window.innerHeight ? ' kalici-acik kalici-baglantili' : ' kalici-acik');
	    this.kaplama.className = this.kaplama.className + ' kalici-acik';
	  }
	  Kalici.prototype.kapat = function() {
	    var _ = this;
	    this.kalici.className = this.kalici.className.replace(' kalici-acik', '');
	    this.kaplama.className = this.kaplama.className.replace(' kalici-acik', '');
	    this.kalici.addEventListener(this.gecisSonu, function() {
	      _.kalici.parentNode.removeChild(_.kalici);
	    });
		_.kalici.parentNode.removeChild(_.kalici);
	    this.kaplama.addEventListener(this.gecisSonu, function() {
	      if (_.kaplama.parentNode) _.kaplama.parentNode.removeChild(_.kaplama);
	    });
	  }
	  function gecisSec() {
	    var el = document.createElement('div');
	    if (el.style.WebkitTransition) return "webkitTransitionEnd";
	    if (el.style.OTransition) return "oTransitionEnd";
	    return 'transitionend';
	  }
	  function varsayilanEk(kaynak, ozellikler) {
	    var ozellik;
	    for (ozellik in ozellikler) {
	      if (ozellikler.hasOwnProperty(ozellik)) {
	        kaynak[ozellik] = ozellikler[ozellik];
	      }
	    }
	    return kaynak;
	  }
	  function olusturma() {
	    var icerik, icerikTutucu, belgeParcasi;
	    if (typeof this.ayarlar.icerik === 'string') {
	      icerik = this.ayarlar.icerik;
	    } else {
	      icerik = this.ayarlar.icerik.innerHTML;
	    }
	    belgeParcasi = document.createDocumentFragment();
	    this.kalici = document.createElement('div');
	    this.kalici.className = 'kalici-kalici ' + this.ayarlar.className;
	    this.kalici.style.minWidth = this.ayarlar.minWidth + 'px';
	    this.kalici.style.maxWidth = this.ayarlar.maxWidth + 'px';
	    if (this.ayarlar.kapatButonu === true) {
	      this.kapatButonu = document.createElement('button');
	      this.kapatButonu.className = 'kalici-kapat kapat-button';
	      this.kapatButonu.innerHTML = 'x';
	      this.kalici.appendChild(this.kapatButonu);
	    }
	    if (this.ayarlar.kaplama === true) {
	      this.kaplama = document.createElement('div');
	      this.kaplama.className = 'kalici-kaplama ' + this.ayarlar.className;
	      belgeParcasi.appendChild(this.kaplama);
	    }
	    icerikTutucu = document.createElement('div');
	    icerikTutucu.className = 'kalici-icerik';
	    icerikTutucu.innerHTML = icerik;
	    this.kalici.appendChild(icerikTutucu);
	    belgeParcasi.appendChild(this.kalici);
	    document.body.appendChild(belgeParcasi);
	  }
	  function initializeEvents() {
	    if (this.kapatButonu) {
	      this.kapatButonu.addEventListener('click', this.kapat.bind(this));
	    }
	    if (this.kaplama) {
	      this.kaplama.addEventListener('click', this.kapat.bind(this));
	    }
	  }
	})();

sonra sayfa kodlarımızı ekleyelim

</head>
<body>
	<a href="#" id="calistirKaliciButton">Aç</a>
	test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>
	test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>
	test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>
	test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>
	test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>
	test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>
	test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>
	test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>
	test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>

script tagı içerisine kapatma komutlarını ekleyelim

	var kalicim = new Kalici({
			icerik: 'Test1 <b>Test2</b>'
		});
		var calistirKalici = document.getElementById('calistirKaliciButton');
		calistirKalici.addEventListener('click', function() {
			kalicim.acik();
		});

sayfa kapanış kodlarımızı ekleyelim

</body></html>

 

Çok Renkli Küre Etiket Bulutu

Öncelikle jquery kütüphanemizi script tagı ile çağırıyoruz

https://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js

istediğimiz alana bu menü linklerimizi ekliyoruz.

<ul id="test" class="xmpl" style="height: 390px; width: 698px;">
    <?php for($x=0;$x<100;$x++){
         echo '<li value="'.floor(100-$x).'"><a href="#'.$x.'" >d'.$x.'n</a></li>';
    }?>
</ul>

script tagı içerisinde bu kodları ekliyoruz

/*
* jQuery TagCloud 0.5.1
*/
;(function($) {
	// private variables
	var oSettings;
	var oUlCss = {};
	var oLiCss = {};
	var fGAng = 2.399963; // sphere angle in radians*pi
	// default settings
	$.tagcloud = {
		 id: "TagCloud"
		,version: "0.5.1"
		,defaults: {
			 height: null
			,type: "cloud"		// "cloud", "list" or "sphere"
			,sizemax: 20
			,sizemin: 10
			,colormax: "00F"
			,colormin: "B4D2FF"
			,seed: null			// only for type=="cloud"
			,power: .5			// only for type=="sphere"
			,padding: 0
		}
	};
	$.fn.extend({
		tagcloud: function(_settings) {
			oSettings = $.extend({}, $.tagcloud.defaults, _settings);
			if (oSettings.seed===null) oSettings.seed = Math.ceil(Math.random()*45309714203);

			switch (oSettings.type) {
				// treemap ::	http://www.jquery.info/The-TreeMap-plugin
								
				case "sphere":
				case "cloud":
					oUlCss = {position:"relative"};
					oLiCss = {position:"absolute",display:"block"};
				break;
				case "list":
					oUlCss = {height:"auto"};
					oLiCss = {position:"static",display:"inline"};
				break;
			}

			Rng.setSeed(oSettings.seed+123456);

			return this.each(function(i,o) {
				var mUl = $(o);
				var aLi = mUl.find(">li");
				var iNumLi = aLi.length;


				var iUlW = mUl.width();
//				var iUlH = oSettings.height===null?mUl.height():oSettings.height;
				var iUlH = oSettings.height===null?(.004*iUlW*iNumLi):oSettings.height;
				mUl.css({width:iUlW,height:iUlH,listStyle:"none",margin:0,padding:0});
				mUl.css(oUlCss);
				

				var iValMx = -2147483647;
				var iValMn = 2147483648;
				var iLastVal = -1;
				for (var j=0;j<iNumLi;j++) {
					var mLi = $(aLi[j]);
					var iVal = mLi.attr("value")==-1?iLastVal++:mLi.attr("value");
					if (iVal>iValMx) iValMx = iVal;
					if (iVal<iValMn) iValMn = iVal;
					iLastVal = iVal;
				}
				var iValRn = iValMx-iValMn;

				// place on line to create minimal overlays
				var aLine = new Array();
				for (var j=0;j<iNumLi;j++) aLine[j] = j;
				for (var j, x, k = aLine.length; k; j = parseInt(Rng.rand(0,1000)/1000 * k), x = aLine[--k], aLine[k] = aLine[j], aLine[j] = x);

				iLastVal = -1;
				for (var j=0;j<iNumLi;j++) {
					var mLi = $(aLi[j]);;
					var iVal = mLi.attr("value")==-1?iLastVal++:mLi.attr("value");
					iLastVal = iVal;
					//
					var fPrt = ((iNumLi-j-1)/(iNumLi-1));
					var fPrt = (iVal-iValMn)/iValRn;
					//
					var iSzFnt = oSettings.sizemin + fPrt*(oSettings.sizemax-oSettings.sizemin);
					var sColor = colorRng(oSettings.colormin,oSettings.colormax,fPrt);
					//
					mLi.css({"word-wrap":"break-word",
                             "fontSize":iSzFnt,
                             "position":"absolute",
                             "color":"#"+sColor,
                             "margin":0,
                             "padding":oSettings.padding}).children().css({color:"#"+sColor});
					var iLiW = mLi.width();
					var iLiH = mLi.height()
					//
					var oCss = {};
					if (oSettings.type!="list") {
						if (oSettings.type=="cloud") {
							var iXps = Rng.rand(0,iUlW-iLiW);
							var iYps = aLine[j]*(iUlH/iNumLi) - iLiH/2;
						} else {
							var fRds = Math.pow(j/iNumLi,oSettings.power);
							var fRad = (j+Math.PI/2)*fGAng;
							var iXps = iUlW/2 - iLiW/2 + .5*iUlW*fRds*Math.sin(fRad);
							var iYps = iUlH/2 - iLiH/2 + .5*iUlH*fRds*Math.cos(fRad);
						}
						oCss.left = iXps;
						oCss.top  = iYps;
					}
					for (var prop in oLiCss) oCss[prop] = oLiCss[prop];
					mLi.css(oCss);
				}
			});
		}
	});
	// Park-Miller RNG
	var Rng = new function() {
		this.seed = 23145678901;
		this.A = 48271;
		this.M = 2147483647;
		this.Q = this.M/this.A;
		this.R = this.M%this.A;
		this.oneOverM = 1.0/this.M;
	}
	Rng.setSeed = function(seed) {
		this.seed = seed;
	}
	Rng.next = function() {
		var hi   = this.seed/this.Q;
		var lo   = this.seed%this.Q;
		var test = this.A*lo - this.R*hi;
		this.seed = test + (test>0?0:this.M);
		return (this.seed*this.oneOverM);
	}
	Rng.rand = function(lrn, urn) {
		return Math.floor((urn - lrn + 1) * this.next() + lrn);
	}
	// hex dec
	function d2h(d) {return d.toString(16);}
	function h2d(h) {return parseInt(h,16);}
//	function getC(s,rgb) {
//		var aRng = [[[0,1],[1,2],[2,3]],[[0,2],[2,4],[4,6]]][s.length==3?0:1][rgb];
//		return s.substring(aRng[0],aRng[1]);
//	}
	function getRGB(s) {
		var b3 = s.length==3;
		var aClr = [];
		for (var i=0;i<3;i++) {
			var sClr = s.substring( i*(b3?1:2), (i+1)*(b3?1:2) );
			aClr.push(h2d(b3?sClr+sClr:sClr));
		}
		return aClr;
	}
	function getHex(a) {
		var s = "";
		for (var i=0;i<3;i++) {
			var c = d2h(a[i]);
			if (c.length==1) c = "0"+c; // todo: this can be better
			s += c;
		}
		return s;
	}
	function colorRng(mn,mx,prt) {
		var aMin = getRGB(mn);
		var aMax = getRGB(mx);
		var aRtr = [];
		for (var i=0;i<3;i++) aRtr.push( aMin[i] + Math.floor(prt*(aMax[i]-aMin[i])) );
		return getHex(aRtr);
	}
	// trace
	function trace(o) {
		if (window.console&&window.console.log) {
			if (typeof(o)=="string")	window.console.log(o);
			else						for (var prop in o) window.console.log(prop+": "+o[prop]);
		}
	};
	// set functions
	$.fn.TagCloud = $.fn.Tagcloud = $.fn.tagcloud;
})(jQuery);
$(document).ready(function() {
$("ul").tagcloud({type:"sephere",width:300,height:300,sizemin:8,sizemax:36,power:0.5});
 function createRandomColor() { 
 var hex = '0123456789ABC'.split(''), color = '#', i; 
 for (i = 0; i < 6; i += 1) {
 color = color + hex[Math.floor(Math.random() * 13)];
 } 
 return color;
}
 $('ul li').each(function() {
 var $a = $(this).find('a');
 var rastgelerenk = createRandomColor();
 $a.css({color: rastgelerenk});
 });
});

 

Anlık Çoklu Resim Yüklemek

index.php dosyası oluşturup jquery kütüphanemizi script tagı ile ekleyin.

http://code.jquery.com/jquery-1.10.2.js

style tagı içerisine bu kodları ekleyin.

.btn {
display: inline-block;
padding: 6px 12px;
margin-bottom: 0;
color: #ffffff;
font-size: 14px;
font-weight: bold;
line-height: 1.428571429;
text-align: center;
white-space: nowrap;
vertical-align: middle;
cursor: pointer;
border: 1px solid transparent;
border-radius: 4px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
user-select: none;
}
.btn-add {
color: #ffffff;
background-color: #428bca;
border-color: #357ebd;
}
.btn-add:hover, .btn-add:focus, .btn-add:active, .btn-add.active {
color: #ffffff;
background-color: #3276b1;
border-color: #285e8e;
}

script tagı içerisine bu kodları ekleyin.

$(document).ready(function(){
 //Dosya Yükle
 $("#form").bind("submit",function(){
 $("#sonuclar").empty();
 $(this).attr("target","gelenBilgi");
 $("<img />").attr("src","yukleniyor.gif").appendTo($("#sonuclar")); 
 $("#gelenBilgi").bind("load", function(){
 var deger = $("#gelenBilgi").contents().find("body").html();
 $("#sonuclar").html(deger);
 $("#sonuclar2").val($("#sonuclar img").attr("src")); 
 });
 });
});
 var dosya = $("input[name=dosya[]]").val();
 var file = "dosya="+dosya;
 $.ajax({
 type: "POST",
 url: "dosyayukle.php",
 data: file,
 success: function(sonuc){
 $("#gelenBilgi").append(sonuc);
 }
 });

istediğiniz bir yere bu kodları ekleyin.

<table class="table">
 <tr>
 <td>
     <strong>Resim:</strong>
 </td>
 <td>
     <form action="dosyayukle.php" method="post" enctype="multipart/form-data" id="form"> 
        <input type="file" style="width:80px;" name="dosya[]" />
        <input type="submit" value="Yükle" />
     </form> 
 </td>
 <td rowspan="2" align="center">
    <iframe id="gelenBilgi" name="gelenBilgi" src style="display:none;">
    </iframe>
    <div id="sonuclar"></div>
 </td>
 </tr>
 <tr>
     <form action="" method="post"> 
         <td colspan="3" >
             <iframe id="gelenBilgi" name="gelenBilgi" src style="display:none;">
             </iframe>
             <input name="resim" id="sonuclar2" ><br>
             <input name="update" type="submit" class="btn btn-edit" value="Yüklenen url yi gönder" />
         </td>
    </form>
 </tr>
 </table>

yukleniyor.gif adlı bir resim oluşturun.

dosyayukle.php adlı bir dosya oluşturun ve içine bu kodları ekleyin.

<?php
 
function rasgeleharf($kackarakter){
	$s="";
	$char="abcdefghijklmnoprstuwvyzqx1234567890–__"; /// İzin verilen karakterler ?
	for ($k=1;$k<=$kackarakter;$k++){
		$h=substr($char,mt_rand(0,strlen($char)-1),1);
		$s.=$h;
	}
	return $s;
}
$toplam = count($_FILES["dosya"]["name"]);
$formatlar = array("image/png","image/jpeg","image/gif","image/bmp");
for($i= 0;$i < $toplam; $i++){
  if (in_array($_FILES["dosya"]["type"][$i],$formatlar)){
		$uzanti =substr($_FILES["dosya"]["name"][$i],-4,4);
		$ad =substr($_FILES["dosya"]["name"][$i],0,-4);
		$isim = rasgeleharf(5);
		$dizin = "img/".$ad."_".$isim.$uzanti;
		if(move_uploaded_file($_FILES["dosya"]["tmp_name"][$i],$dizin)){
			echo '<img height="100" src="'.$dizin.'" alt="" class="resim" />';
		}else{
			echo '<font color="red">Dosya Yüklenemedi!!</form>';
		}
	}else{
		echo '<font color="red">Geçersiz Dosya Formatı.</font>'; 
	}
}
?>

Son olarak img diye resimlerin saklanacağı bir klasör oluşturun.