تعليق: حتى إذا تم ترميز الصورة المضمنة في BASE64 ، فإن الميزة هي أنها يمكن أن تقلل من طلبات HTTP ، ولكن العيب هو أنه لا يمكن تخزينها عبر المجالات. استخدم وظيفة ReadAsdataurl في واجهة برمجة تطبيقات ملف HTML5. هذا رمز يحول الملف إلى BASE64.
لقد تواصل للتو مع مفهوم الصور المضمّنة. حتى إذا تم ترميز الصور المقلدة في Base64 ، بالنظر إلى الكود التالي ، فهي مشكلة مضمنة.يمكن أن يقلل من طلبات HTTP ، ولكن العيب هو أنه لا يمكن تخزينه مؤقتًا عبر المجالات!
<img src = "data: image/jpeg ؛ base64 ،/9J/4QQSRX ...">
ثم كيفية تحويل الصور إلى base64 عبر الإنترنت
إذا كنت تعتمد فقط على JavaScript البسيطة ، فأنت تعاني
الآن بعد أن وصل HTML5 إلى Baidu ، هناك الكثير من المعلومات حول الصينية والعديد من المستندات الأخرى لـ W3C
الآن نستخدم وظيفة ReadAsdataurl في واجهة برمجة تطبيقات ملف HTML5 ، وهو ملف تحويل إلى ترميز BASE64.
<! doctype html public "-// w3c // dtd xhtml 1.0 transitional // en"
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv = "content-type" content = "text /html ؛ charset = utf-8" />
<title> اختبار ملف HTML5 البسيط لـ PIC2BASE64 </title>
<style>
</style>
<script>
window.onload = function () {
var input = document.getElementById ("demo_input") ؛
var result = document.getElementById ("result") ؛
var img_area = document.getElementById ("img_area") ؛
if (typeof (fileReader) === 'undefined') {
result.innerhtml = "آسف ، لا يدعم متصفحك FileReader ، يرجى استخدام متصفح حديث للعمل!" ؛
input.setAttribute ("معطل" ، "معطل") ؛
} آخر {
input.adDeventListener ('Change' ، readfile ، false) ؛}
}
وظيفة readfile () {
var file = this.files [0] ؛
// هنا نحكم على النوع إذا لم تكن صورة ، ثم أعدها وأزلها وتحميل أي ملف
if (!/image /// w+/. test (file.type)) {
تنبيه ("يرجى التأكد من أن الملف هو نوع الصورة") ؛
العودة كاذبة
}
var reader = new FileReader () ؛
reader.readasdataurl (file) ؛
reader.onload = function (e) {
result.innerhtml = '<img src = "'+this.result+'" />' ؛
img_area.innerhtml = '<viv> صورة IMG Display: < /div> <img src = "'+this.result+'" />' ؛
}
}
</script>
</head>
<body>
<إدخال type = "file" value = "sdgsdg" />
<textarea rows = 30 cols = 300> </textarea>
<p> </p>
</body>
</html>