07-27-2012, 04:44 PM
|
#1
|
مدون مميز
تاريخ التسجيل: Apr 2012
المشاركات: 441
|
مركز رفع صور خاص بمدونتك
بسم الله الرحمن الرحيم
اقدم لكم كود مركز رفع صور خاص بالمدونة
مركز رفع سريع جدا بمجرد اختيار الصورة المراد رفعها تظهر بسرعه
للمعاينه الاضافه
مشكله هذة الاضافه لا تعطى رابط الصورة المرفوعه مثل المواقع المدفوعه ولكن يمكنك اخد الرابط من خلال الضغط على كليك يمين
ولاستخدام الاضافه فم بفتح صفحه 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>
__________________
|
|
|