0921-734-5800
musavi.alireza@gmail.com
همین امروز تماس بگیرید
ورود به سایت ثبت نام در سایت
فن وب و اینترنت > دوره > JavaScript > خواندن یک فایل با Filereader

خواندن یک فایل با Filereader

مساله :

کاربر در صفحه مرورگر خود یک تصویر را برای آپلود انتخاب می کند ، برای نمایش این تصویر پس از انتخاب ما دو راه حل داریم :

  • عکس را در قالب یک فرم به سمت سرور ارسال کنیم و سپس به صورت ajax مسیر را گرفته و در صفحه نمایش دهیم
  • عکس را پس از انتخاب بدون ارسال به سمت سرور توسط Javascript نمایش دهیم .

یک نکته رو باید در نظر داشته باشیم چون Js در سمت مرورگر کار می کند به همین دلیل دسترسی آن به اطلاعات داخل کامپیوتر شخص یعنی عکس ها و تصاویر بسیار خطرناک است به همین دلیل اینکه بخواهیم یک عکس را بلافاصله بعد از انتخاب از مسیر محلی گرفته و در داخل محل مربوطه نمایش دهیم کار صحیحی نیست . برای انجام این کار باید عکس را اول به سمت سرور فرستاده و سپس لینک آن را برای نمایش در اختیار کاربر قرار دهیم . که این کار نیز توسیله Ajax می تواند انجام شود . ولی ما می توانیم به سادگی مسیر و مشخصات عکس یا فایل داده شده را ببینیم و از آن استفاده کنیم این مشخصات در متغیر زیر قرار دارند :

Event.target.files

اما یک راه برای حل این مشکل وجود دارد یعنی راهی که ما عکس را به سرور ارسال نکنیم ولی آن به محض انتخاب کاربر در صفحه نمایش دهیم . برای این منظور JS باید متن عکس را مانند یک فایل متنی بخواند و سپس آنرا در داخل کادر مربوطه نمایش دهد . برای این منظور ما از filereader استفاده می کنیم . این object متن اطلاعات داخل یک فایل را خوانده و به داخل حافظه منتقل می کند و سپس وقتی کار load به پایان میرسد رویداد onload به صورت اتوماتیک اجرا شده  و ما دراین زمان می توانیم از محتویات آن استفاده کنیم .تابع filereader شامل چهار روش غیر همسان برای خواندن محتویات فایل دارد :

  • readAsBinaryString(Blob|File)- The result property will contain the file/blob’s data as a binary string. Every byte is represented by an integer in the range [0..255].
  • readAsText(Blob|File, opt_encoding)- The resultproperty will contain the file/blob’s data as a text string. By default the string is decoded as ‘UTF-8’. Use the optional encoding parameter can specify a different format.
  • readAsDataURL(Blob|File)- The result property will contain the file/blob’s data encoded as a data URL.
  • readAsArrayBuffer(Blob|File)- The result property will contain the file/blob’s data as an ArrayBuffer object.

به محض اینکه یکی از توابع بالا در موضوع Filereader صدا زده شوند ، از توابع زیر می توان برای پیگیری و اجرای خواسته خودمان اسفاده کنیم : onprogress , onload , onabort , onerror,onloadend .مثال زیر با استفاده از تابع reader.readasdataurl() مسیر تصویر انتخابی کاربر را ساخته و سپس آنرا در محل تگ IMG برای نمایش قرار می دهد .

در JS وقتی که رویدادی اتفاق می افتد ما می توانیم آنرا گرفته و مدیریت کنیم . که معمولا این کار توسط این دستور انجام می شود :

Event همان متغیری است که در آن رویداد ذخیره شده است . یکی از مهمترین متغیرهای این رویداد target است . به عنوان مثال ، کلاس موضوعی که روی آن رویداد اتفاق افتاده است :

در صورتیکه آن موضوع Input از نوع file باشد ، فایل های انتخاب شده در این متغیر قرار می گیرند

ID موضوعی را نمایش می دهد که رویداد روی آن اتفاق افتاده است

مقداری که در TAG برای Field ، Name تنظیم شده است . و سایر متغیرها و پارامترها که برای مطالعه و دیدن آنها کافی است که یک Console.log از این متغیر بگیریم .

یک توضیح و مثال ساده برای Filereader :

یک دگمه و یک تصویر در صفحه HTML با مشخصات زیر می سازیم . در خط زیر یک تگ برای ورود یک فایل تصویر درج شده و در صورتیکه فایلی مشخص شود توسط کاربر تابع openfile اجرا می شود . دقت کنید که یک event اجرا خواهد شد که نام آن onchange است و در زمان این رویداد تابع openfile اجرا می شود . به این تابع نیز یک متغیر event که همان متغیر global و تعریف شده سیستم است فرستاده می شود که در بالا بسیار در این مورد صحبت شد .

و اما تابع اصلی ، که با همان نام یک آرگومان به نام event می گیرد . در تعریف تابع Filereader داشتیم که هر موقع یک نمونه از این عضو بسازیم به صورت اتوماتیک می توانیم به توابع onload آن دسترسی داشته باشیم . پس تابعی می نویسیم که در زمان onload  کار ما را انجام دهد . ضمنا نگران صدا زده شدن تابع نباشیم چون فایل انتخاب شده است و حتما event دارای یک target است .

داخل متغیر reader تعریف شده که امکان دیدن آن با console.log نیز است ، یک متغیری با نام result است که در آن خود سیستم به صورت اتوماتیک محتوی فایل باز شده را قرار می دهد . پس کافی است که این مقدار را بگیریم :

بعد از گرفتن این مقدار می توانیم به سادگی آن را در داخل یک المان که در اینجا Image source است قرار دهیم . دقت کنید که output ما در اینجا یک img است که در بالا نیز تعریف شده است .

در نهایت نیز تابع زیر را صدا می کنیم :

و به صورت کلی برنامه ما به شکل زیر است :

کل تابع نیز به قرار زیر است :

به عنوان مثالی دیگر می توانیم به زبانی ساده این تابع را به این شکل تعریف کنیم :

اول از همه متغیری که فایل در آن قرار گرفته را مشخص کرده و در input قرار می دهیم و سپس به مرورگر می گوئیم که به یک لینک  از محتویات فایل شماره صفر آپلود شده بساز و برگردان ، حالا اینکه این اطلاعات کی و کجا باید قرار بگیرند وظیفه تابع onload است که در ذیل آن نوشته شده است .

در این لیمک مطلبی مشابه آنچه که در بالا آمده قرار گرفته است . در صورت نیاز به اطلاعات بیشتر می توانید این لینک را نیز مطالعه کنید .

5490

این پست با کد 1698 در تاریخ ۹۷/۰۸/۳۰ توسط علیرضا نوشته شده است.

هیچ نظری در مورد این پست ثبت نشده است . شما اولین باشید .

دیدگاه خود را بنویسید

در نظر داشته باشید ایمیل شما نزد ما خصوصی می باشد .

برای نوشتن پیغام از هر گونه متنی می توانید استفاده کنید