اكتشف ما هو Blob وكيفية استخدامه
تقوم مستعرضات الويب بتنفيذ ملفBlob
الكائن ، وهو المسؤول عن الاحتفاظ بالبيانات.
Blob تعني "كائن كبير ثنائي" وهو تمثيل معتم لجزء من البايت.
تستخدم النقط لأشياء كثيرة.
يمكن إنشاؤها من محتوى من الشبكة. يمكن حفظها على قرص أو قراءتها من قرص. هم هيكل البيانات الأساسي لـFile
المستخدمة فيFileReader
API ، على سبيل المثال.
يمكن إرسال blob بينعمال الويبوإطارات iFramesباستخدامواجهة برمجة تطبيقات Channel Messaging، ومن خادم إلى عميل باستخدام امتداددفع API.
يمكن أيضًا الرجوع إلى Blobs باستخدام عناوين URL.
يمكنك استخراج نص (أو بايت) مخزن في blob ، ويمكن تخزين النقط مباشرة في قاعدة البيانات المفهرسة، ويمكن استرجاعها من هناك أيضًا.
انظر بلديبرنامج تعليمي مفهرس
النقط هي نوع بيانات أساسي يجب فهمه.
يمكن إنشاء blob:
- باستخدام
Blob()
البناء - من نقطة أخرى باستخدام ملف
Blob.slice()
طريقة المثيل
يأخذ المنشئ مجموعة من القيم. حتى لو كان لديك سلسلة واحدة فقط لوضعها في النقطة ، يجب عليك لفها في مصفوفة.
مثال:
const data = new Blob(['Test'])
لست مطالبًا بوضع ملفخيطالقيمة. يمكنك تمرير:
- سلسلة
- ا
ArrayBuffer
- ا
ArrayBufferView
- النقط الأخرى
يأخذ مُنشئ Blob معلمة ثانية اختيارية ، والتي تمثل نوع MIME:
const data = new Blob(['Test'], { type: 'text/plain' })
بمجرد أن يكون لديك كائن Blob ، يمكنك الوصول إلى خاصيتين له:
size
إرجاع طول محتوى النقطة بالبايتtype
نوع MIME المرتبط به
ويمكنك استدعاء طرقها الوحيدة ،slice()
.
عندما تتصلslice()
يمكنك استرداد جزء من النقطة.
هذا مثال على إنشاء blob جديد من 10 إلى 20 بايتaBlob
:
const partialBlob = aBlob.slice(10, 20);
تحميل blob
يتم استخدام هذا الرمز بمثابة رد اتصال لنوع الإدخال أو السحب والإفلات. نقوم بتحميل blob إلى عنوان url باستخدامXHR، باستخدامf
وظيفة لتتبع التقدم:
const uploadBlob = (url, blob, trackProgress) => {
const xhr = new XMLHttpRequest()
xhr.open('POST', url)
xhr.send(blob)
xhr.upload.onprogress = trackProgress
}
تنزيل البيانات من الإنترنت على هيئة blob
يمكننا تنزيل البيانات من الإنترنت وتخزينها في كائن Blob باستخدام هذه الصيغة:
const downloadBlob = (url, callback) => {
const xhr = new XMLHttpRequest()
xhr.open('GET', url)
xhr.responseType = 'blob'
<span style="color:#a6e22e">xhr</span>.<span style="color:#a6e22e">onload</span> <span style="color:#f92672">=</span> () => {
<span style="color:#a6e22e">callback</span>(<span style="color:#a6e22e">xhr</span>.<span style="color:#a6e22e">response</span>)
}
<span style="color:#a6e22e">xhr</span>.<span style="color:#a6e22e">send</span>(<span style="color:#66d9ef">null</span>)
}
عناوين الإنترنت Blob
لقد ذكرت أنه يمكن أيضًا الرجوع إلى blobs باستخدام عناوين URL.
يتم إنشاء Blob URLs بواسطة المستعرض وهي مراجع داخلية. بالنظر إلى blob ، يمكنك إنشاء عنوان URL له باستخدام ملفURL.createObjectURL()
وظيفة.
يبدأ Blob URL بامتدادblob://
مخطط.
بمجرد أن يرى المستعرض عنوان URL هذا ، فإنه سيخدم blob المقابل المخزن في الذاكرة أو في القرص.
تختلف عناوين URL الخاصة بـ Blob عن عناوين URL للبيانات (تبدأ بـdata:
) ، لأنهم لا يخزنون البيانات في عنوان URL. وهي تختلف أيضًا عن عناوين URL للملف (بدءًا منfile:
) ، لأنها لا تكشف عن معلومات حساسة مثل مسار الملف.
إذا قمت بالوصول إلى Blob URL لم يعد موجودًا ، فستتلقى خطأ 404 من المستعرض.
بمجرد إنشاء blob URL ، يمكنك إزالته من خلال استدعاء ملفURL.revokeObjectURL()
وتمرير عنوان URL.
مثال على تحميل ملف من قرص محلي على الصفحة والحصول على ملف
في نموذج التعليمات البرمجية هذا ، لدينا ملفinput
عنصر لتحديد صورة. بمجرد تحديد الصورة ، نقوم بإزالة عنصر الإدخال ونعرض الصورة. نقوم أيضًا بمسح النقطة بمجرد الانتهاء من عرض الصورة:
<input type="file" allow="image/*" />
const input = document.querySelector('input')
input.addEventListener(‘change’, e => {
const img = document.createElement(‘img’)
const imageBlob = URL.createObjectURL(input.files[0])
img.src = imageBlob
<span style="color:#a6e22e">img</span>.<span style="color:#a6e22e">onload</span> <span style="color:#f92672">=</span> <span style="color:#66d9ef">function</span>() {
<span style="color:#a6e22e">URL</span>.<span style="color:#a6e22e">revokeObjectURL</span>(<span style="color:#a6e22e">imageBlob</span>)
}
<span style="color:#a6e22e">input</span>.<span style="color:#a6e22e">parentNode</span>.<span style="color:#a6e22e">replaceChild</span>(<span style="color:#a6e22e">img</span>, <span style="color:#a6e22e">input</span>)
})
القراءة من النقطة
لا يمكنك الوصول مباشرة إلى البيانات الموجودة في blob.
لكي نتمكن من القيام بذلك ، يجب علينا استخدامFileReaderموضوع.
تحميل مجانيدليل جافا سكريبت للمبتدئين
المزيد من دروس المتصفح:
- تتوفر بعض الحيل المفيدة في HTML5
- كيف أنشأت موقع ويب يستند إلى CMS يعمل دون اتصال بالإنترنت
- الدليل الكامل لتطبيقات الويب التقدمية
- واجهة برمجة تطبيقات الجلب
- دليل Push API
- واجهة برمجة تطبيقات Channel Messaging
- دروس عمال الخدمة
- دليل ذاكرة التخزين المؤقت API
- دليل API الإخطار
- الغوص في IndexedDB
- واجهة برمجة تطبيقات المحددات: querySelector و querySelectorAll
- تحميل JavaScript بكفاءة مع التأجيل وغير المتزامن
- نموذج كائن المستند (DOM)
- واجهة برمجة تطبيقات Web Storage: التخزين المحلي وتخزين الجلسة
- تعرف على كيفية عمل ملفات تعريف الارتباط HTTP
- واجهة برمجة تطبيقات التاريخ
- تنسيق صورة WebP
- طلب XMLHttpRequest (XHR)
- برنامج تعليمي متعمق SVG
- ما هي عناوين URL للبيانات
- خارطة الطريق لتعلم منصة الويب
- CORS ، تقاسم الموارد عبر الأصول
- عمال الويب
- دليل requestAnimationFrame ()
- ما هو النوع
- العمل مع DevTools Console وواجهة برمجة تطبيقات وحدة التحكم
- واجهة برمجة تطبيقات تركيب الكلام
- كيفية انتظار حدث جاهز لـ DOM في JavaScript عادي
- كيفية إضافة فئة إلى عنصر DOM
- كيفية تكرار عناصر DOM من querySelectorAll
- كيفية إزالة فئة من عنصر DOM
- كيفية التحقق من وجود فئة لعنصر DOM
- كيفية تغيير قيمة عقدة DOM
- كيفية إضافة حدث نقرة إلى قائمة عناصر DOM التي تم إرجاعها من querySelectorAll
- WebRTC ، واجهة برمجة تطبيقات الويب في الوقت الفعلي
- كيفية الحصول على موضع التمرير لعنصر في JavaScript
- كيفية استبدال عنصر DOM
- كيفية قبول الصور فقط في حقل ملف الإدخال
- لماذا تستخدم نسخة معاينة من المتصفح؟
- كائن النقطة
- كائن الملف
- كائن FileReader
- كائن FileList
- ArrayBuffer
- ArrayBufferView
- كائن URL
- صفائف من النوع
- كائن DataView
- واجهة برمجة تطبيقات BroadcastChannel
- واجهة برمجة تطبيقات Streams
- كائن FormData
- كائن المستكشف
- كيفية استخدام واجهة برمجة تطبيقات تحديد الموقع الجغرافي
- كيفية استخدام getUserMedia ()
- كيفية استخدام Drag and Drop API
- كيفية العمل مع التمرير على صفحات الويب
- التعامل مع النماذج في JavaScript
- أحداث لوحة المفاتيح
- أحداث الماوس
- أحداث اللمس
- كيفية إزالة جميع العناصر الأبناء من عنصر DOM
- كيفية إنشاء سمة HTML باستخدام Vanilla Javascript
- كيف تتحقق مما إذا كان مربع الاختيار محددًا باستخدام JavaScript؟
- كيفية النسخ إلى الحافظة باستخدام JavaScript
- كيفية تعطيل زر باستخدام JavaScript
- كيفية جعل صفحة قابلة للتحرير في المتصفح
- كيفية الحصول على قيم سلسلة الاستعلام في JavaScript باستخدام URLSearchParams
- كيفية إزالة جميع CSS من صفحة مرة واحدة
- كيفية استخدام insertAdjacentHTML
- سفاري ، حذر قبل الإقلاع عن التدخين
- كيفية إضافة صورة إلى DOM باستخدام JavaScript
- كيفية إعادة تعيين نموذج
- كيفية استخدام خطوط جوجل