تُستخدم وظيفة معاينة تحميل الصورة بشكل أساسي لمعاينة تأثير قبل تحميل الصورة. في الوقت الحالي ، تتضمن الطرق السائدة بشكل أساسي JS و JQuery و Flash ، لكننا نستخدم عمومًا JS لتنفيذ وظيفة معاينة تحميل الصور. دعنا نلقي نظرة على مثال أدناه.
مبدأ:
يتم تقسيمها إلى خطوتين: عند تشغيل إدخال الصورة وتحديد الصورة المحلية ، يتم تحميل عنوان URL (عنوان URL) للكائن ؛ قم بتعيين عنوان URL للكائن إلى سمة SRC لعلامة IMG المكتوبة مسبقًا لعرض الصورة.
هنا ، نحتاج إلى فهم كائن الملف وكائن blob وطريقة window.url.createObjecturl () في JavaScript.
كائن الملف:
يمكن استخدام كائن الملف للحصول على معلومات حول ملف ، ويمكن أيضًا استخدامه لقراءة محتوى الملف. بشكل عام ، يكون كائن الملف من كائن FileList الذي تم إرجاعه بواسطة المستخدم بعد تحديد ملف على عنصر إدخال ، أو يمكن أن يكون كائن Datatransfer الذي تم إنشاؤه بواسطة عمليات السحب والإفلات المجانية.
دعونا نلقي نظرة على الحصول على كائن Filelist:
نسخة الكود كما يلي:
<script type = "text/javaScript" src = "jquery.js"> </script>
<input id = "upload" type = "file">
<img id = "معاينة" src = "">
<script type = "text/javaScript">
$ ('#تحميل'). التغيير (function () {
// احصل على العنصر الأول من Filelist
ALERT (document.getElementById ('Upload'). files [0]) ؛
}) ؛
</script>
كائن النقطة:
كائن Blob هو كائن يشبه الملف الذي يحتوي على بيانات RAW للقراءة فقط. لا يجب بالضرورة أن تكون البيانات الموجودة في كائن Blob نموذجًا أصليًا في JavaScript. تعتمد واجهة الملف على blob ، وترث وظائف Blob ، وتمتد لدعم الملفات المحلية على جهاز الكمبيوتر الخاص بالمستخدم.
يتم الحصول على عنوان URL للكائن الذي نريد الحصول عليه بالفعل من كائن BLOB ، لأن واجهة الملف ترث Blob. فيما يلي تحويل كائن blob إلى عنوان URL:
نسخة الكود كما يلي:
<script type = "text/javaScript">
var f = document.getElementById ('Upload'). files [0] ؛
var src = window.url.createBjecturl (f) ؛
document.getElementById ('معاينة'). src = src ؛
</script>
التوافق:
الطريقة أعلاه مناسبة لمتصفح الكروم
إذا كان متصفح IE ، يمكنك استخدام قيمة الإدخال مباشرة بدلاً من SRC
عند عرض المعلومات عبر الإنترنت ، يمكنك استخدام طريقة getAsdataurl () مباشرة لكائن الملف للحصول على عنوان URL. الآن تم إلغاء هذه الطريقة. وبالمثل ، هناك طرق getastext () و getAsbinary (). دعونا نلقي نظرة على مثل هذا المثال.
نسخة الكود كما يلي:
وظيفة getfullpath (obj) {// احصل على المسار الكامل إلى الصورة
إذا (obj) {
//أي
if (window.navigator.useragent.indexof ("msie")> = 1) {
obj.select () ؛
return document.selection.createRange (). text ؛
}
// Firefox
آخر if (window.navigator.useragent.indexof ("firefox")> = 1) {
if (obj.files) {
إرجاع OBJ.FILES.ITEM (0) .GETASDATAURL () ؛
}
إرجاع obj.value ؛
}
إرجاع obj.value ؛
}
}
هذا الرمز هو المسار الكامل للحصول على صورة العميل
سوف نحد من حجمه وتنسيقه
نسخة الكود كما يلي:
$ ("#loadfile"). Change (function () {
var strsrc = $ ("#loadfile"). val () ؛
IMG = صورة جديدة () ؛
img.src = getFullPath (strsrc) ؛
// تحقق من أن تنسيق ملف التحميل صحيح
var pos = strsrc.lastindexof (".") ؛
var lastName = strsrc.substring (pos ، strsrc.length)
if (lastName.toLowerCase ()! = ".jpg") {
ALERT ("نوع الملف الذي تحمله هو" + LastName + "، يجب أن تكون الصورة من نوع JPG") ؛
العودة كاذبة
}
// تحقق من نسبة العرض إلى الارتفاع في الملف الذي تم تحميله
if (img.height / img.width> 1.5 || img.height / img.width <1.25) {
التنبيه ("نسبة الصورة التي تقوم بتحميلها تتجاوز النطاق ، ويجب أن تتراوح نسبة العرض إلى الارتفاع بين 1.25-1.5") ؛
يعود؛
}
// تحقق مما إذا كان الملف الذي تم تحميله كبيرًا
if (img.filesize / 1024> 150) {
التنبيه ("حجم الملف الذي تحمله يتجاوز الحد 150k!") ؛
العودة كاذبة
}
من بينها ، LoadFile هو معرف ملف إدخال HTML. بعد حدث التغيير ، أي بعد تحديد الملف المراد تحميله ، دع الصورة يتم عرضها في مربع الصورة؟ أضف الرمز التالي إلى نهاية الرمز أعلاه
نسخة الكود كما يلي:
$ ("#supic"). attr ("src" ، getFullPath (this)) ؛
منذ استخدام jQuery ، دعنا نشارك مثال رمز مكتوب في jQuery:
نسخة الكود كما يلي:
<html xmlns = "http://www.w3.org/1999/xhtml">
<head id = "Head1">
<meta http-equiv = "content-type" content = "text /html ؛ charset = utf-8" />
<script type = "text/javaScript" src = "jquery.js"> </script>
<script language = "javaScript">
$ (function () {
var ei = $ ("#كبير") ؛
ei.hide () ؛
$ ("#img1"). mousemove (وظيفة (e) {
ei.css ({top: e.pagey ، اليسار: e.pagex}).
}). mouseout (function () {
ei.hide ("بطيئة") ؛
})
$ ("#f1"). التغيير (function () {
$ ("#img1") .attr ("src" ، "file: ///"+$ ("#f1") .val ()) ؛
})
}) ؛
</script>
<type type = "text/css">
#large {الموضع: Absolute ؛ Display: None ؛ z-index: 999 ؛}
</style>
</head>
<body>
<form name = "form1" id = "form1">
<div id = "demo">
<input id = "f1" name = "f1" type = "file" />
<img id = "img1">
</div>
<div id = "large"> </viv>
</form>
</body>
</html>