مقدمة: عندما نقوم بإنشاء صفحات ويب، غالبًا ما نحتاج إلى تحميل الصور، وقد نختار <input type=file/> أو نلتقط صورًا للتحميل الأمر مختلف بعض الشيء، لذلك تسجل هذه المقالة استخدام css+js لتنفيذ وظائف المعاينة والتحميل المضغوط بعد تحديد الصورة. بعض المعلومات تأتي من الإنترنت، ويتم تسجيلها وتنظيمها هنا.
معاينة التأثير:
1. إنشاء ملف Index.html<!DOCTYPE html><html> <head> <meta charset=UTF-8> <اسم التعريف=محتوى منفذ العرض=العرض=عرض الجهاز، المقياس الأولي=1.0، الحد الأقصى للمقياس=1.0، قابل للتطوير بواسطة المستخدم=لا> <title>التقاط الصور وتحميلها</title> <link rel=stylesheet href=index.css/> <script type='text/javascript' src='index.js' charset='utf-8'></script> </head> <body> <form id=mainForm> <div class=content> <div class=label>بطاقة الهوية</div> <div class=img-area > <div class=container> <نوع الإدخال=معرف الملف='id-face' name='face' Accept=image/* /> <div id='face-empty-result'> <img style='width:4rem' src=https://github.com/wangheng3751/my-resources/blob/master/images/camera.png?raw=true <p>الصورة الأمامية لبطاقة الهوية</p> </div > <img style='width: 100%' id='face-result'/> </div> <div class=container style='margin-top:0.5rem;'> <input type=file id='id-back' name='back' Accept=image/* /> <div id='back-empty-result'> <img style='width:4rem' src=https://github.com/wangheng3751/my-resources/blob/master/images/camera.png?raw=true <p>صورة عكسية لبطاقة الهوية</p> </div> <img style='width: 100%' id='back-result'/> </div> </div> </div> <div class = btn> إرسال</div> </form> </body></html>2. إنشاء ملف Index.css
الجسم { الهامش: 0}. المحتوى { الحشو: 0.5ريم؛ العرض: فليكس؛ محاذاة العناصر: المركز؛ الحدود السفلية: 1 بكسل #999 الصلبة}. التسمية { العرض: 5ريم؛}.img-منطقة { فليكس: 1} .container{ لون الخلفية: #e7e7e7؛ الموضع: نسبي؛ }.container div { محاذاة النص: الحشوة: 0.5rem 0}.container input{ opacity:0; height: 100% width: 100%; p{ حجم الخط: 0.9rem اللون: #999}.btn {لون الخلفية: #4363ab اللون: #fff؛ الحشو: 0.5ريم 1ريم؛ العرض: 80%؛ نصف قطر الحدود: 0.2ريم؛ الهامش: 2ريمي؛ وزن الخط: 600؛ 3. إنشاء ملف Index.js window.onload=function(){ document.getElementById(id-face).addEventListener(change, function(){ onFileChange(this,face-result,face-empty-result) }); document.getElementById(id-back) .addEventListener(change, function(){ onFileChange(this,back-result,back-empty-result) }); document.getElementsByClassName(btn)[0].addEventListener(click, function(){ Submit(); });};/** * المعالجة عند تحديد الصورة* @param {*} fileObj عنصر ملف الإدخال * @param {*} el // معرف العنصر المستخدم لعرض الصورة عند تحديده * @param {*} btnel // معرف منطقة الزر المعروضة عند عدم تحديد الصورة */function onFileChange(fileObj,el,btnel){ var windowURL = window.URL || window.webkitURL; var imgObj = document.getElementById(el); .display=block; if (fileObj && fileObj.files && fileObj.files[0]) { dataURL = windowURL.createObjectURL(fileObj.files[0]); imgObj.src=dataURL; } else { dataURL = fileObj.value; (sizingMethod=scale); imgObj.filters.item(DXImageTransform.Microsoft.AlphaImageLoader).src = dataURL }}/** * إرجاع بيانات تنسيق base64 بعد ضغط الصورة* @param {*} image img element* @param {*} العرض بعد الضغط عرض الصورة* @param {*} الارتفاع ارتفاع الصورة المضغوطة* @param {*} qua //جودة الصورة 1-100 */function compressImageTobase64(image,width,height,qua){ varquality = qua qua / 100 : 0.8; var Canvas = document.createElement(canvas), ctx = Canvas.getContext('2d'); h = image.naturalHeight; Canvas.width = width||w; ctx.drawImage(image, 0, 0, w, h, 0, 0, width||w, height||h); function Submit(){ //1. تقديم النموذج //document.getElementById(mainForm).submit(); //2 face_data=compressImageTobase64(document.getElementById(face-result),200,100,90); var back_data=compressImageTobase64(document.getElementById(back-result),200,100,90); ,face_data); formData.append(back,back_data); // يجب تقديم jQuery $.ajax({ url:/address, type: 'POST', ذاكرة التخزين المؤقت: false, البيانات:formData, timeout:180000,processData: false, contentType: خطأ، نجاح:وظيفة(ص){ }، خطأ:وظيفة(ص){ } });}كود المصدر: عنوان جيثب
تلخيصما ورد أعلاه هو html+css+js الذي قدمه المحرر لتنفيذ وظيفة التقاط الصور ومعاينتها وتحميلها، وآمل أن يكون مفيدًا لك. إذا كانت لديك أي أسئلة، فيرجى ترك رسالة لي وسيفعلها المحرر الرد عليك في الوقت المناسب. أود أيضًا أن أشكر الجميع على دعمكم لموقع VeVb للفنون القتالية!