تقدم هذه المقالة كيفية تحويل المسار المطلق للصورة إلى كائن ملف في HTML5 ومشاركته مع الجميع، والتفاصيل هي كما يلي:
لتحويل المسار المطلق للصورة إلى ترميز base64، يرجى مراجعة هذه المقالة
دعونا نفهم أولاً نقاط المعرفة الأساسية:
1. فهم كائن FileList وكائن الملف في HTML5.في HTML5، يمثل كائن FileList قائمة بالملفات التي حددها المستخدم. من خلال إضافة سمة multipe، يمكن تحديد ملفات متعددة مرة واحدة ضمن عنصر التحكم في الملف. كل ملف محدد من قبل المستخدم في عنصر التحكم هو كائن ملف، والكائن FileList عبارة عن قائمة بكائنات الملفات. يمثل جميع الملفات التي حددها المستخدم. دعونا أولاً نلقي نظرة على عرض توضيحي بسيط لمعرفة السمات التي يمتلكها كائن الملف. الكود التالي:
<!DOCTYPE html><html> <head> <title>نظام الملفات:URL</title> </head> <body> <div> <label>اختر:</label> <input type='file' multi id= ملف /> <input type=button value=تحميل الملف onClick=showFile() /> </div> <script> function showFile() { var files = document.getElementById('file').files; إرجاع جميع الملفات المحددة for (var i = 0, ilen = files.length; i < ilen; i++) { // اطبع معلومات كائن ملف واحد console.log(files[i]); المعلومات كما يلي: الملف { lastModified: 1457946612000 lastModifiedDate: Mon Mar 14 2016 17:10:12 GMT+0800 (CST) {} الاسم: test.html الحجم: 796 النوع: text/html webkitRelativePath: */ /* إذا تم تحميل صورة، فسيتم إرجاع المعلومات التالية: File { lastModified: 1466907500000 lastModifiedDate: Sun 26 Jun 2016 10 : 18:20 بتوقيت جرينتش+0800 (توقيت وسط أمريكا) {} الاسم: a.jpg الحجم: 23684 type: image/jpeg webkitRelativePath: } */ /* لذلك، إذا كنت بحاجة إلى تحديد ما إذا كان الملف الذي تم تحميله هو ملف صورة، فيمكنك الحكم وفقًا للنوع كما يلي: var file = files[i]; /image// /w+/.test(file.type)) { console.log('هذا الملف ليس ملف صورة'); } else { console.log('هذا الملف هو ملف صورة' }); لكن إذا كنت تريد نقل الصور فقط، يمكنك إضافة سمة Accept=image/* إلى عنصر التحكم في الصورة، يمكننا كتابة الكود على النحو التالي: <input type='file' multiple Accept = 'image/gif,image/jpeg؛ ,image/ jpg,image/png' /> */ } } </script> </body></html> 2. فهم الكائنات الثنائية الكبيرةالنقاط الأساسية: في HTML5، تتم إضافة كائن Blob جديد لتمثيل البيانات الثنائية الأصلية. في الواقع، يرث كائن الملف أيضًا كائن Blob.
يحتوي كائن Blob على سمتين. تمثل سمة الحجم طول البايت لكائن Blob، وتمثل سمة النوع نوع MIME للكائن Blob. إذا كان نوعًا غير معروف، فسيتم إرجاع سلسلة فارغة.
يرجى إلقاء نظرة على الكود التالي:
<!DOCTYPE html><html> <head> <title>نظام الملفات:URL</title> </head> <body> <div> <label>اختر ملفًا:</label> <input type=file id=file / > <input type=button value=إظهار معلومات الملف onClick=showFileType() /> <p>طول بايت الملف: <span id=size></span></p> <p>نوع الملف: <span id=type></span></p> </div> <script> function showFileType() { var file; // احصل على الملف الأول الذي حدده المستخدم file = document.getElementById('file').files[ 0] var size = document.getElementById('size'); var type = document.getElementById('type'); // عرض طول الملف بالبايت size.innerHTML = file.size; عرض نوع الملف type.innerHTML = file.type; // افتح وحدة التحكم لعرض كائن الملف الذي تم إرجاعه console.log(file); } </script> </body></html>ملاحظة: يمكن استخدام Blob وFile في نفس الوقت، ويمكن استخدام FileReader لقراءة البيانات من Blob.
ما يلي هو عنوان صورة المسار المطلق الذي يتم تحويله إلى صورة بترميز base64، ثم يتم تحويل الصورة المشفرة بترميز base64 إلى كائن ثنائي كبير الحجم. الرمز هو كما يلي:
<!DOCTYPE html><html> <head> <title>تحويل بيانات عنوان url لصورة base64 إلى Blob</title> </head> <body> <script> /** * تحويل بيانات url لصورة base64 لـ Blob * @param urlData * يتم التعبير عن بيانات الصورة base64 في وضع url */ function converterBase64UrlToBlob(base64){ var urlData = base64.dataURL var type = base64.type var bytes = window.atob(urlData.split(',')[1]); // إزالة رأس عنوان url وتحويله إلى بايت // التعامل مع الاستثناءات وتحويل كود ascii الأقل من 0 إلى أكبر من 0 var ab = new ArrayBuffer(bytes. length); var ia = new Uint8Array(ab); for (var i = 0; i < bytes.length; i++) { ia[i] = bytes.charCodeAt(i); } return new Blob( [ab] , {type : type}); } /* * تحويل عنوان المسار المطلق للصورة إلى ترميز base64 كما يلي: */ function getBase64Image(img) { var Canvas = document.createElement(canvas); Canvas.width = img.width; Canvas.getContext(2d); ctx.drawImage(img, 0, 0, img.width, img.height); var dataURL = Canvas.toDataURL(image/+ext); return { dataURL: dataURL, type: image/+ext }; } var img = https://img.alicdn.com/bao/uploaded/TB1qimQIpXFXXSutbFXXX.jpg; var image = new Image(); image.crossOrigin = ''; image.onload = function (){ var base64 = getBase64Image(image); console.log(base64); معلومات الطباعة هي كما يلي: { dataURL: data:image/png;base64,xxx type: image/jpg } */ var img2 = converterBase64UrlToBlob(base64); console.log(img2); : Blob {الحجم: 9585، النوع: image/jpg} */ } </script> </body></html>ملاحظة: في HTML5، تتم إضافة كائن Blob جديد لتمثيل البيانات الثنائية الأصلية، وفي الواقع، يرث كائن الملف أيضًا كائن Blob. لذلك يمكننا استخدام العنوان المطلق للصورة لتحويلها إلى كائن ملف.
لذلك، يمكننا استخدام العنوان المطلق للصورة لتحويلها إلى كائن ملف للحصول على عرض توضيحي مفصل، يمكنك رؤية التحكم في تحميل الصورة على git. يدعم المكون الإضافي أولاً تحميل الصور، ثم وجدت ذلك فجأة عندما أذهب إلى صفحة التعديل، أحتاج إلى عرض الصورة الافتراضية. وفي الوقت نفسه، يتم دعم الاستمرار في تحميل الصور الجديدة عند عرض الصور بشكل افتراضي، أو حذف جميع الصور لي العنوان المطلق للصورة، لذلك كنت أتساءل عن كيفية تحويل العنوان المطلق للصورة إلى كائن ملف إذا لم أقوم بالتحويل إذا أصبح كائن ملف، عند استخدام هذا الرمز، var Reader = new FileReader(); سيبلغ عن خطأ، لذا يمكنك استخدام كائن blob الذي تحدثنا عنه أعلاه لتحويله إلى كائن blob أولاً، ثم يمكنك استخدام كائن تشغيل الملف fileReader.
للحصول على التعليمات البرمجية التفصيلية، يرجى الاطلاع على التحكم في تحميل الصورة على git الخاص بي (https://github.com/tugenhua0707/html5UploadImage للحصول على التأثير، يرجى الاطلاع على https://tugenhua0707.github.io/html5UploadImage/index.html).
ما ورد أعلاه هو المحتوى الكامل لهذه المقالة وآمل أن يكون مفيدًا لدراسة الجميع وآمل أيضًا أن يدعم الجميع شبكة VeVb Wulin.