تعامل با فایل ها در  HTML5
1397/06/05 09:51 , بهزاد ناظمی

تعامل با فایل ها در HTML5

 HTML5 یک API فایل استاندارد دارد که یک صفحه HTML را قادر می سازد تا با فایل های محلی سیستم در مرورگر ارتباط برقرار کند. این API چهار رابط کلید را تعریف می کند:

  • :BLOB این رابط نشان دهنده داده های خام غیر قابل تغییر است. یک Blob نوع خاصی دارد که نوع رسانه ای از داده ها را نشان می دهد، مانند text / plain.

 

  • :File این رابط از Blob به ارث می برد و یک فایل منفرد را نشان می دهد.

 

  • :FileList این رابط مجموعه ای از اشیاء فایل است.

 

  • :FileReader این رابط روشی برای خواندن یک فایل یا blob را فراهم می کند.

 رابط FileReader

این رابط سه روش برای خواندن اطلاعات فراهم می کند.

  • readAsText (): یک فایل یا blob را خوانده و محتویات را به عنوان متن ساده در اختیار شما قرار می دهد. این روش برای زمانی که شما می خواهید محتویات یک فایل متنی را بخوانید، مفید است.

 

  • readAsDataURL (): یک فایل یا blob را می خواند و محتویات را به عنوان URL داده تولید می کند. این روش زمانی مفید است که شما می خواهید محتویات یک فایل دودویی مانند یک تصویر را بخوانید.

 

  • readAsArrayBuffer (): یک فایل یا blob را میخواند و محتویات را به عنوان ArrayBuffer در دسترس قرار می دهد.

 

شئ FileReader محتوای را یکنواخت می کند و پیشرفت عملیات بارگیری را نشان می دهد. برخی از وقایع به شرح زیر است:

 رویداد progress  در صورت لود شدن داده ها به طور مکرر اتفاق می افتد، برای نشان دادن پیشرفت.

  • رویداد load  نشان می دهد که داده ها با موفقیت بارگذاری می شوند.

 

  • رویداد abort نشان می دهد که بارگیری داده لغو شده است.

 

  • رویداد error  نشان می دهد که در هنگام بارگیری خطا رخ داده است.

 

  • رویداد loadend نشان می دهد که عملیات خواندن تکمیل شده است، یا با موفقیت یا بدون موفقیت انجام شده است.

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

  • دریافت یک شی فایل یا blob توسط <input type=”field”> یا با کشیدن و رها کردن.

 

  • یک شیء FileReader ایجاد کنید و وقایع مانند بارگذاری و خطا را مدیریت کنید.

 

  • فراخوانی readAsText () در شیء FileReader

 

  • در تابع مدیریت رویداد بارگذاری، محتوای متنی را در نتایج رویداد هدف را به دست می آورید.

 

  • در تابع مدیریت رویداد خطا ، پیاده سازی خطای مربوطه را اجرا کنید.

مثال :

<!doctype html>  
<html lang="en">  
<head>  
<title>Reading a File</title>  
<script type="text/javascript">  
function onLoadTextFile() {  
var myFile = document.getElementById("myTextFile");  
// Get the File object selected by the user, and be sure it is a text  
file  
if (myFile.files.length != 0 && myFile.files[0].type.match(/text.*/)) {  
// Create a FileReader and handle teh onload and onerror events.  
var reader = new FileReader();  
onload = function(e) {  
var myDisplayContents = document.getElementById("theDisplayArea");  
value = e.target.result;  
};  
onerror = function(e) {  
alert("Cannot load the file");  
};  
// Read text file, second parameter (encoding) is optional  
readAsText(myFile.files[0], "ISO-8859-1");  
} else {  
alert("Select a text file");  
}  
}  
</script>  
</head>  
<body>  
<h1> Reading a Text File </h1>  
<p> Select the text file: <input type="file" value="aa" id="myTextFile" onchange="onLoadTextFile()" />  
<hr>  
<h3>Contents of the File:</h3> <textarea id="theDisplayArea" rows="15" cols="40"> </textarea> </body>  
</html>

  

 خروجی :

 

       برگرفته از : https://www.c-sharpcorner.com

 

جالب است بخوانید

طرز تبدیل HTML به WordPress

بهترین قالب های رایگان HTML5 و CSS3

9 چیز که باید در مورد HTML5 بدانید

Shell Scripting چیست و چرا باید از آن استفاده کرد؟

 

از آخرین دوره های آموزشی و تخفیف ها مطلع شوید

با تکمیل فرم زیر ، از اخبار و اطلاعات به روز برنامه نویسی و تکنولوژی عقب نمانید

آخرین مطالب

آموزش جامع SQL Server (جلسه ۱۲)
آموزش جامع SQL Server (جلسه ۱۲)

دستور UPDATE در SQL Server برای تغییر داده‌های موجود در یک جدول، از دستور UPDATE به شکل زیر استفاده ...

آموزش جامع SQL Server (جلسه ۱۵)
آموزش جامع SQL Server (جلسه ۱۵)

دستور DROP TABLE در SQL Server گاهی، لازم است یک جدول که دیگر استفاده‌ای ندارد را حذف کنید. برای ...

آموزش جامع SQL Server (جلسه ۳۵: Window Functionها – بخش ۲)
آموزش جامع SQL Server (جلسه ۳۵: Window Functionها – بخش ۲)

بخش اول از آخرین مبحث دوره جامع آموزش SQL Server در جلسه قبلی بررسی شد. این مبحث که ...

آخرین دیدگاه ها

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

فرم ارسال نظرات