معهد خبراء بلوجر - عرض مشاركة واحدة

REDA · 07-27-2012, 04:44 PM

بسم الله الرحمن الرحيم

اقدم لكم كود مركز

رفع صور خاص بالمدونة

مركز رفع سريع جدا بمجرد اختيار الصورة المراد رفعها تظهر بسرعه

للمعاينه الاضافه

مشكله هذة الاضافه لا تعطى رابط الصورة المرفوعه مثل المواقع المدفوعه ولكن يمكنك اخد الرابط من خلال الضغط على كليك يمين

ولاستخدام الاضافه فم بفتح صفحه html/javascript
وضع هذا الكود :

كود بلغة HTML:

   <!DOCTYPE html>
<html>
<head>
<**** charset=utf-8 />
<title>Image preview</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>
var blank="http://upload.wikimedia.org/wikipedia/commons/c/c0/Blank.gif";
function readURL(input) {
    if (input.files && input.files[0]) {
        var reader = new FileReader();

        reader.onload = function (e) {
            $('#img_prev')
            .attr('src', e.target.result)
            .height(200);
        };

        reader.readAsDataURL(input.files[0]);
    }
    else {
      var img = input.value;
        $('#img_prev').attr('src',img).height(200);
    }
    $("#x").show().css("margin-right","10px");
}
$(document).ready(function() {
  $("#x").click(function() {
    $("#img_prev").attr("src",blank);
    $("#x").hide();  
  });
});
</script>
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style>
article, aside, figure, footer, header, hgroup,
menu, nav, section { display: block; }
#x { display:none; position:relative; z-index:200; float:right}
#previewPane { display: inline-block; }
</style>
</head>
<body>
<section>
<input type='file' onchange="readURL(this);" /><br/>
<span id="previewPane">
<img id="img_prev" src="#" alt="your image" />
<span id="x">[X]</span>
</span>
</section>
</body>
</html>