كائن FileList

اكتشف ما هو كائن FileList وكيفية استخدامه

عندما يكون لديك نموذج HTML بامتداد<input type="file" />عنصر ، عندما يتم تحميل ملف واحد أو أكثر من قبل المستخدم سوف تتفاعل مع ملفFileListموضوع.

ليس هذا هو المكان الوحيد الذي يمكن أن يمنحكFileListموضوع. ستحصل على واحد أيضًا عند التفاعل مع السحب والإفلات.

بالتمسك بالنماذج ، لا يسمح نوع الإدخال افتراضيًا بتحميل ملفات متعددة.

سوف تسترجع FileList بعنصر واحد فقط ، ويمكنك استرجاعها باستخدام الصيغة التالية:

<input type="file" />
const input = document.querySelector('input')

input.addEventListener(‘change’, e => { const fileList = input.files const theFile = fileList[0] })

اختيار أي عنصر من أFileListسيحصل الكائن على أFile object. In this case we just have one, so we select the item at position 0.

يمكنك أيضًا استعادتها باستخدام ملفitem()طريقة تحديد الفهرس:

const input = document.querySelector('input')

input.addEventListener(‘change’, e => { const fileList = input.files const theFile = fileList.item(0) })

إذا تم تمكين متعددة ، على الرغم من ذلك ، فإن استخدامmultipleينسب (<input type="file" multiple />) ، ستحتوي FileList على عناصر متعددة.

يمكنك الحصول على العد من خلال النظر فيlengthممتلكاتFileList.

يقوم هذا المثال بتحميل الملفات التي تم تحميلها والتكرار عليها لطباعة اسم كل ملف:

<input type="file" multiple />
const input = document.querySelector('input')

input.addEventListener(‘change’, e => { const files = input.files const filesCount = fileList.length

for (let i = 0; i < files.length; i++) { const file = files[i] alert(file.name) } })


المزيد من دروس المتصفح: