آموزش HTML 5 FileReader API با استفاده ازjQuery

درین نوشته‌ی‌علمی ما قصد داریم طراحی سایت در مشهد که با طرح یک نمونه بی آلایش طرز استعمال از HTML5 FileReader API را برای قرائت فولدر های Image و اکران تصویر فارغ از اپلود در سرور با به کار گیری از JQuery را توضیح بدهیم.

قصد داریم که تصویر محلی فارغ از آپلود در سرور با به کار گیری از غربال DXImageTransform در خصوصیت Css و HTML5 FileReader API اکران بدهیم.

HTML Markup

HTML Markup در اختیار گرفتن HTML FileUpload و Div را مشمول رایاپارس می‌گردد که برای اکران زنده گزینه به کار گیری قرار خواهد گرفت.

Live Preview

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

ما نیاز داریم که اولیه پوشه عکس را آیتم اعتبار سنجی قرار بدهیم ahrefs که از صدق آن مطمئن بشویم.آن‌گاه نیاز داریم که مرورگر و ورژن آن را که بر طبق آن شالوده گذاری گردیده‌است مشخص و معلوم کنیم و ما نیاز به یک نحوه مطلوب برای اکران عکس پیش از آپلود داریم.

آیتم 1:مرورگری که از Html5 هواخواهی نمی نماید که به تیتر نمونه Inteet Explorer 8 و 9

برای مرورگرهایی که  HTML5 و DXImageTransform filter CSS را امان نمی‌کنند بایستی DXImageTransform filter را در DIV طراحی کرد و نشانی فایل را در در اختیار گرفتن FileUpload تفاهم نامه.

گزینه 2:مرورگرهایی که از HTML5 مدد می نمایند مثلا Inteet Explorer 10 و 11 ، FireFox ، Chrome و Opera.

برای این مرورگرها که از HTML5 و همینطور از HTML5 FileReader API جانبداری می نمایند.فولدر تعیین گردیده در در اختیار گرفتن FileUpload به طور BASE64 string با به کارگیری از مشی readAsDataURL خوانده میشود و با استعمال از در اختیار گرفتن Image به اکران درآورده می‌شود.

استایل های Css

برهان امنیتی Explorer 8 و 9

Explorer 8 و 9 یک خصوصیت امنیتی داراست که بازدارنده از فعالیت کردن با تصاویر زنده در طرحی که بر روی میزبانی سرور میباشد ، می گردد.

با دقت به‌این خصوصیت امنیتی جان دار در‌این مرورگرها نشانی این عکس ها را به C:\Images\Pouriya تغییر تحول میدهیم.

Png در C:\FakePath\Mudassar.png.

و از این رو جاوا اسکریپت حاذق به گزینش محل فولدر میباشد.

راهکار این خلل این میباشد که درخواست تارنما را در دامنه های امن مرورگر Inteet Explore بیافزایید.