HTML5 学习FileReader接口代码实例分享9（图）
1、FileReader概述
FileReader 对象允许Web应用程序异步读取存储在用户计算机上的文件（或原始数据缓冲区）的内容，使用 File 或 Blob 对象指定要读取的文件或数据。
其中File对象可以是来自用户在一个<input>元素上选择文件后返回的FileList对象,也可以来自拖放操作生成的DataTransfer对象,还可以是来自在一个HTMLCanvasElement上执行mozGetAsFile()方法后返回结果。
2、FileReader接口方法
| 方法名 | 参数 | 描述 |
| readAsBinaryString | file | 将文件读取为二进制码 |
| readAsText | file,[encoding] | 将文件读取为文本 |
| readAsDataURL | file | 将文件读取为DataURL |
| readAsArrayBuffer | file | 将文件读取为ArrayBuffer对象 |
| abort | (none) | 中断读取操作 |
3、FileReader接口事件
| 事件 | 描述 |
| onabort | 数据读取中断时触发 |
| onerror | 数据读取出错时触发 |
| onloadstart | 数据读取开始时触发 |
| onprogress | 数据读取中 |
| onload | 数据读取成功完成时触发 |
| onloadend | 数据读取完成时触发，无论成功失败 |
4、使用实例
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Html5Test</title>
</head>
<body>
<article>
<header></header>
<section>
<p>
<lable>请选择一个文件：</lable>
<input type="file" id="file_reader">
<input type="button" value="读取图像" onclick="readAsDataUrl();">
<input type="button" value="读取二进制数据" onclick="readAsBinaryString();">
<input type="button" value="读取文本文件" onclick="readAsText();">
</p>
<p id="file_reader_result" name="file_reader_result">
<!-- 这里用来显示读取结果 -->
</p>
<script>
var file_reader_result = document.getElementById("file_reader_result");
// 检测浏览器是否支持FileReader
if (typeof FileReader == "undefined") {
file_reader_result.innerHTML = "您的浏览器不支持FileReader";
file.setAttribute('disabled', 'disabled');
}
// 将文件以Data Url形式读入页面
function readAsDataUrl(){
// 检查是否为图像文件
var f = document.getElementById("file_reader").files[0];
if (!/image\/\w+/.test(f.type)) {
file_reader_result.innerHTML = "请上传图片文件！";
return false;
};
var reader = new FileReader();
// 将文件以Data Url形式读入页面
reader.readAsDataURL(f);
reader.onload = function(e){
file_reader_result.innerHTML = '<img src="' + this.result + '" alt="图片" />';
}
}
// 将文件以二进制形式读入页面
function readAsBinaryString(){
// 检查是否为图像文件
var f = document.getElementById("file_reader").files[0];
if (!/image\/\w+/.test(f.type)) {
file_reader_result.innerHTML = "请上传图片文件！";
return false;
};
var reader = new FileReader();
// 将文件以二进制形式读入页面
reader.readAsBinaryString(f);
reader.onload = function(e){
file_reader_result.innerHTML = this.result;
}
}
// 将文件以文本形式读入页面 目前测试仅支持txt文件
function readAsText(){
// 检查是否是文本文件
var f = document.getElementById("file_reader").files[0];
if (!/text\/\w+/.test(f.type)) {
file_reader_result.innerHTML = "请上传文本文件！";
return false;
};
var reader = new FileReader();
// 将文件以文本形式读入页面
reader.readAsText(f);
reader.onload = function(e){
file_reader_result.innerHTML = this.result;
}
}
</script>
</section>
</article>
</body>
</html>Atas ialah kandungan terperinci HTML5 学习FileReader接口代码实例分享9（图）. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Alat AI Hot
Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik
AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.
Undress AI Tool
Gambar buka pakaian secara percuma
Clothoff.io
Penyingkiran pakaian AI
Video Face Swap
Tukar muka dalam mana-mana video dengan mudah menggunakan alat tukar muka AI percuma kami!
Artikel Panas
Alat panas
Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma
SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan
Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa
Dreamweaver CS6
Alat pembangunan web visual
SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)
Topik panas
1393
52
38
113
Apakah antara muka dalaman papan induk komputer yang disyorkan pengenalan kepada antara muka dalaman papan induk komputer
Mar 12, 2024 pm 04:34 PM
Apabila kami memasang komputer, walaupun proses pemasangannya mudah, kami sering menghadapi masalah dalam pendawaian Selalunya, pengguna tersilap memasangkan talian bekalan kuasa radiator CPU ke SYS_FAN Walaupun kipas boleh berputar, ia mungkin tidak berfungsi apabila komputer dihidupkan. Akan terdapat ralat F1 "CPUFanError", yang juga menyebabkan penyejuk CPU tidak dapat melaraskan kelajuan secara bijak. Mari kita berkongsi pengetahuan bersama tentang antara muka CPU_FAN, SYS_FAN, CHA_FAN dan CPU_OPT pada papan induk komputer. Sains popular pada antara muka CPU_FAN, SYS_FAN, CHA_FAN dan CPU_OPT pada papan induk komputer 1. CPU_FANCPU_FAN ialah antara muka khusus untuk radiator CPU dan berfungsi pada 12V
Paradigma pengaturcaraan biasa dan corak reka bentuk dalam bahasa Go
Mar 04, 2024 pm 06:06 PM
Sebagai bahasa pengaturcaraan yang moden dan cekap, bahasa Go mempunyai paradigma pengaturcaraan yang kaya dan corak reka bentuk yang boleh membantu pembangun menulis kod yang berkualiti tinggi dan boleh diselenggara. Artikel ini akan memperkenalkan paradigma pengaturcaraan biasa dan corak reka bentuk dalam bahasa Go dan memberikan contoh kod khusus. 1. Pengaturcaraan berorientasikan objek Dalam bahasa Go, anda boleh menggunakan struktur dan kaedah untuk melaksanakan pengaturcaraan berorientasikan objek. Dengan mentakrifkan struktur dan kaedah mengikat kepada struktur, ciri berorientasikan objek bagi pengkapsulan data dan pengikatan tingkah laku boleh dicapai. packagemaini
Pengenalan kepada antara muka PHP dan cara mentakrifkannya
Mar 23, 2024 am 09:00 AM
Pengenalan kepada antara muka PHP dan bagaimana ia ditakrifkan PHP ialah bahasa skrip sumber terbuka yang digunakan secara meluas dalam pembangunan Web Ia fleksibel, mudah dan berkuasa. Dalam PHP, antara muka ialah alat yang mentakrifkan kaedah biasa antara pelbagai kelas, mencapai polimorfisme dan menjadikan kod lebih fleksibel dan boleh digunakan semula. Artikel ini akan memperkenalkan konsep antara muka PHP dan cara mentakrifkannya, dan menyediakan contoh kod khusus untuk menunjukkan penggunaannya. 1. Konsep antara muka PHP Antara muka memainkan peranan penting dalam pengaturcaraan berorientasikan objek, mentakrifkan aplikasi kelas
Penyelesaian kepada NotImplementedError()
Mar 01, 2024 pm 03:10 PM
Sebab ralat adalah dalam python Sebab mengapa NotImplementedError() dilemparkan dalam Tornado mungkin kerana kaedah atau antara muka abstrak tidak dilaksanakan. Kaedah atau antara muka ini diisytiharkan dalam kelas induk tetapi tidak dilaksanakan dalam kelas anak. Subkelas perlu melaksanakan kaedah atau antara muka ini untuk berfungsi dengan baik. Cara menyelesaikan masalah ini adalah dengan melaksanakan kaedah abstrak atau antara muka yang diisytiharkan oleh kelas induk dalam kelas kanak-kanak. Jika anda menggunakan kelas untuk mewarisi daripada kelas lain dan anda melihat ralat ini, anda harus melaksanakan semua kaedah abstrak yang diisytiharkan dalam kelas induk dalam kelas anak. Jika anda menggunakan antara muka dan anda melihat ralat ini, anda harus melaksanakan semua kaedah yang diisytiharkan dalam antara muka dalam kelas yang melaksanakan antara muka. Jika anda tidak pasti yang mana
Aplikasi antara muka dan kelas abstrak dalam corak reka bentuk di Jawa
May 01, 2024 pm 06:33 PM
Antara muka dan kelas abstrak digunakan dalam corak reka bentuk untuk penyahgandingan dan kebolehlanjutan. Antara muka mentakrifkan tandatangan kaedah, kelas abstrak menyediakan pelaksanaan separa, dan subkelas mesti melaksanakan kaedah yang tidak dilaksanakan. Dalam corak strategi, antara muka digunakan untuk menentukan algoritma, dan kelas abstrak atau kelas konkrit menyediakan pelaksanaan, membenarkan penukaran dinamik algoritma. Dalam corak pemerhati, antara muka digunakan untuk menentukan tingkah laku pemerhati, dan kelas abstrak atau konkrit digunakan untuk melanggan dan menerbitkan pemberitahuan. Dalam corak penyesuai, antara muka digunakan untuk menyesuaikan kelas yang sedia ada atau kelas konkrit boleh melaksanakan antara muka yang serasi, membenarkan interaksi dengan kod asal.
Wawasan ke dalam sistem Hongmeng: pengukuran fungsi sebenar dan pengalaman penggunaan
Mar 23, 2024 am 10:45 AM
Sebagai sistem pengendalian baharu yang dilancarkan oleh Huawei, sistem Hongmeng telah menimbulkan kekecohan dalam industri. Sebagai percubaan baharu Huawei selepas larangan AS, sistem Hongmeng mempunyai harapan dan harapan yang tinggi. Baru-baru ini, saya cukup bernasib baik untuk mendapatkan telefon mudah alih Huawei yang dilengkapi dengan sistem Hongmeng Selepas tempoh penggunaan dan ujian sebenar, saya akan berkongsi beberapa ujian berfungsi dan pengalaman penggunaan sistem Hongmeng. Mula-mula, mari kita lihat antara muka dan fungsi sistem Hongmeng. Sistem Hongmeng mengguna pakai gaya reka bentuk Huawei sendiri secara keseluruhan, yang mudah, jelas dan lancar dalam operasi. Di desktop, pelbagai
Pelaksanaan kelas dalaman antara muka dan kelas abstrak dalam Java
Apr 30, 2024 pm 02:03 PM
Java membenarkan kelas dalaman ditakrifkan dalam antara muka dan kelas abstrak, memberikan fleksibiliti untuk penggunaan semula kod dan modularisasi. Kelas dalaman dalam antara muka boleh melaksanakan fungsi tertentu, manakala kelas dalaman dalam kelas abstrak boleh mentakrifkan fungsi umum, dan subkelas menyediakan pelaksanaan konkrit.
Antara Muka Java dan Kelas Abstrak: Jalan Menuju Syurga Pengaturcaraan
Mar 04, 2024 am 09:13 AM
Antara Muka: Antara muka kontrak tanpa pelaksanaan mentakrifkan satu set tandatangan kaedah dalam Java tetapi tidak menyediakan sebarang pelaksanaan konkrit. Ia bertindak sebagai kontrak yang memaksa kelas yang melaksanakan antara muka untuk melaksanakan kaedah yang ditentukan. Kaedah dalam antara muka adalah kaedah abstrak dan tidak mempunyai badan kaedah. Contoh kod: publicinterfaceAnimal{voideat();voidsleep();} Kelas Abstrak: Pelan Tindakan Separa Kelas abstrak ialah kelas induk yang menyediakan pelaksanaan separa yang boleh diwarisi oleh subkelasnya. Tidak seperti antara muka, kelas abstrak boleh mengandungi pelaksanaan konkrit dan kaedah abstrak. Kaedah abstrak diisytiharkan dengan kata kunci abstrak dan mesti ditindih oleh subkelas. Contoh kod: publicabstractcla
