كائن النقطة

اكتشف ما هو Blob وكيفية استخدامه

تقوم مستعرضات الويب بتنفيذ ملفBlobالكائن ، وهو المسؤول عن الاحتفاظ بالبيانات.

Blob تعني "كائن كبير ثنائي" وهو تمثيل معتم لجزء من البايت.

تستخدم النقط لأشياء كثيرة.

يمكن إنشاؤها من محتوى من الشبكة. يمكن حفظها على قرص أو قراءتها من قرص. هم هيكل البيانات الأساسي لـFileالمستخدمة فيFileReaderAPI ، على سبيل المثال.

يمكن إرسال 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> () =&gt; {
<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موضوع.

تحميل مجانيدليل جافا سكريبت للمبتدئين