在HTML5中，提供了一个关于文件操作的API，通过这个API，对于从web页面上访问本地文件系统的相关处理变得十分简单。到目前为止只有部分浏览器对它提供支持。
FileList对象表示用户选择的文件列表，在HTML4中file控件内只允许放置一个文件，但在HTML5中通过添加multiple属性，file控件内允许放置多个文件。控件内的每一个用户选择的文件都是一个file对象，而FileList就是这些file对象的列表，代表用户选择的所有文件。file对象有两个属性，一个是name，代表文件名不包含文件的路径；一个是lastModifiedDate，表示文件最后被修改的日期。
<!DOCTYPE html>
<html>
<head>
<meta charset='UTF-8'/>
<title>FileList and File </title>
<script type="text/javascript" language="JavaScript">
function showFiles(){
var file,
len = document.getElementById('file').files.length;//返回FileList文件列表对象
for (var i=0; i < len; i++) {
file = document.getElementById('file').files[i];
alert(file.name);
};
}
</script>
</head>
<body>
<input type="file" id='file' multiple="multiple" width="80px"/>
<input type="button" id="bt1" value="click" onclick="showFiles();"/>
</body>
</html>2.Blob对象
提到Blob对象，估计有人会想起OracleDB中Blob字段，意义上有些类似。HTML5中Blob表示二进制原始数据，它提供一个slice()方法，可以通过这个方法访问到字节内部的原始数据块。事实上，上面提到的file对象继承了Blob对象。
Blob对象的两个属性，size：表示一个对象的字节长度。type：表示一个对象的MIME类型，如若是未知类型返回空字符串。
function showFileInfo(){
var file = document.getElementById('file').files[0];
var size = document.getElementById('fileType');
var type = document.getElementById('fileSize');
size.innerHTML = file.size;
type.innerHTML = file.type;
}
对于图像类型的文件，Blob对象的type属性都是以image/开头，可以利用这个特性对用户选择的文件类型做判断。
function showFileInfo(){
var file = document.getElementById('file').files[0];
if(checkImage(file)){
var size = document.getElementById('fileType');
var type = document.getElementById('fileSize');
size.innerHTML = file.size;
type.innerHTML = file.type;
}
else{
return ;
}
}
function checkImage(file){
if(!/img\/\w+/.test(file.type)){
alert(file.name + "不是图片");
return false;
}
return true;
}另外，file控件在HTML5标准中添加了accept属性，用来限制接受的文件类型，但目前各浏览器对齐支持都仅限于在打开文件选择窗口时默认的选择图像文件而已，如果选择其他类型，控件也能接受。
3.FileReader接口
3.1接口方法
FileReader接口提供了四个方法，其中3个用来读取文件，1个用来中断文件的读取。
| 方法名 | 参数 | 描述 |
| readAsBinaryString() | file | 将文件读取为二进制字符串，通常将它传到后端，后端可以通过这段字符串存储文件 |
| readAsDataURL() | file | 将文件读取为一段data url字符串，事实上是将小文件以一种特格式的URL地址直接读取到页面。小文件通常指图片与html等格式文件 |
| readAsText() | file [encoding] | 将文件以文本的方式读取，其中第二个参数为文本的编码。 |
| abort() | (none) | 中断读取操作。 |
需要注意的是，无论读取成功还是失败，方法都不会返回读取结果，结果返回在result属性中。
3.2接口事件
FileReader接口提供了一套完整的事件模型，用于捕获读取文件时的状态。
| 事件 | 描述 |
| onabort | 数据读取中断时发生 |
| onerror | 数据读取出错时发生 |
| onloadstart | 数据读取开始时发生 |
| onload | 数据读取成功完成时发生 |
| onloadend | 数据读取完成时发生无论读取成功还是失败 |
| onprogess | 数据读取中 |
3.3实例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<title>FileReader</title>
<meta name="description" content="" />
<meta name="viewport" content="width=device-width; initial-scale=1.0" />
<script type="text/javascript" language="JavaScript">
var file ,
result;
function myLoad() {
file = document.getElementById('file').files[0];
result = document.getElementById('result');
}
if(typeof FileReader == 'undefined'){
result.innerHTML = "你的浏览器不支持 FileReader";
file.setAttribute("disabled","disabled");
}
function readAsDataURL(){
if(!/image\/\w+/.test(file.type)){
alert(file.name + '不是一个图片类型的文件');
}else{
var reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = function(e){
result.innerHTML = "<img src=" + reader.result +"/>";
};
}
}
function readAsBinaryString(){
var reader = new FileReader();
reader.readAsBinaryString(file);
reader.onload = function(e){
result.innerHTML = reader.result;
};
}
function readAsText(){
var reader = new FileReader();
reader.readAsText(file);
reader.onload=function(e){
result.innerHTML = reader.result;
};
}
</script>
</head>
<body onload="myLoad();">
<p>
<input type="file" id='file'/>
<input type='button' id="bt_DataURL" value="读取图片" onclick="readAsDataURL();"/>
<input type="button" id="bt_BinaryString" value="读取二进制字符串" onclick="readAsBinaryString();"/>
<input type="button" id="bt_textString" value="读取文本信息" onclick="readAsText();"/>
</p>
<div id="result">
</div>
</body>
</html>Atas ialah kandungan terperinci HTML5 FileAPI图文代码分享. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Kod H5: Amalan Terbaik untuk Pemaju WebApr 16, 2025 am 12:14 AMAmalan terbaik untuk kod H5 termasuk: 1. Gunakan pengisytiharan dan pengekodan watak yang betul; 2. Gunakan tag semantik; 3. Mengurangkan permintaan HTTP; 4. Gunakan pemuatan asynchronous; 5. Mengoptimumkan imej. Amalan ini dapat meningkatkan kecekapan, penyelenggaraan dan pengalaman pengguna halaman web.
H5: Evolusi piawaian dan teknologi webApr 15, 2025 am 12:12 AMPiawaian dan teknologi web telah berkembang dari HTML4, CSS2 dan JavaScript mudah setakat ini dan telah menjalani perkembangan yang ketara. 1) HTML5 memperkenalkan API seperti kanvas dan webstorage, yang meningkatkan kerumitan dan interaktiviti aplikasi web. 2) CSS3 menambah fungsi animasi dan peralihan untuk menjadikan halaman lebih berkesan. 3) JavaScript meningkatkan kecekapan pembangunan dan kebolehbacaan kod melalui sintaks moden node.js dan ES6, seperti fungsi anak panah dan kelas. Perubahan ini telah mempromosikan pembangunan pengoptimuman prestasi dan amalan terbaik aplikasi web.
Adakah H5 adalah singkat untuk HTML5? Meneroka butiranApr 14, 2025 am 12:05 AMH5 bukan sekadar singkatan HTML5, ia mewakili ekosistem teknologi pembangunan web moden yang lebih luas: 1. H5 termasuk HTML5, CSS3, JavaScript dan API dan Teknologi yang berkaitan; 2. Ia menyediakan pengalaman pengguna yang lebih kaya, interaktif dan lancar, dan boleh berjalan dengan lancar pada pelbagai peranti; 3. Menggunakan timbunan teknologi H5, anda boleh membuat laman web responsif dan fungsi interaktif yang kompleks.
H5 dan HTML5: Istilah yang biasa digunakan dalam pembangunan webApr 13, 2025 am 12:01 AMH5 dan HTML5 merujuk kepada perkara yang sama, iaitu HTML5. HTML5 adalah versi kelima HTML, membawa ciri -ciri baru seperti tag semantik, sokongan multimedia, kanvas dan grafik, penyimpanan luar talian dan penyimpanan tempatan, meningkatkan ekspresi dan interaktiviti laman web.
Apa yang dirujuk oleh H5? Meneroka konteksApr 12, 2025 am 12:03 AMH5referstohtml5, apivotaltechnologyinwebdevelopment.1) html5introducesnewelementsandapisforrich, dynamicwebapplications.2) itsupp ortsmultimediawithoutplugins, enhancusexperienceaceacrossdevices.3) SemantikelementsImproveContentstructureandseo.4) H5'srespo
H5: Alat, Rangka Kerja, dan Amalan TerbaikApr 11, 2025 am 12:11 AMAlat dan kerangka yang perlu dikuasai dalam pembangunan H5 termasuk Vue.js, React dan Webpack. 1.vue.js sesuai untuk membina antara muka pengguna dan menyokong pembangunan komponen. 2. Leact mengoptimumkan rendering halaman melalui DOM maya, sesuai untuk aplikasi yang kompleks. 3.WebPack digunakan untuk pembungkusan modul dan mengoptimumkan beban sumber.
Warisan HTML5: Memahami H5 pada masa kiniApr 10, 2025 am 09:28 AMHtml5hassignificlylylectransformedwebdevelopmentbyintroducingsemanticelements, enhancingmultimediasupport, andimprovingperformance.1) itmadewebebsitesmoreaccessibleandseo-friendlywithSemhyViVeShive, dan
Kod H5: Kebolehcapaian dan HTML SemantikApr 09, 2025 am 12:05 AMH5 meningkatkan kebolehaksesan laman web dan kesan SEO melalui unsur -unsur semantik dan atribut ARIA. 1. Gunakan, dan lain -lain untuk mengatur struktur kandungan dan meningkatkan SEO. 2. Atribut Aria seperti ARIA-Label meningkatkan kebolehcapaian, dan pengguna teknologi bantuan boleh menggunakan laman web dengan lancar.
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
AI Hentai Generator
Menjana ai hentai secara percuma.
Artikel Panas
Alat panas
DVWA
Damn Vulnerable Web App (DVWA) ialah aplikasi web PHP/MySQL yang sangat terdedah. Matlamat utamanya adalah untuk menjadi bantuan bagi profesional keselamatan untuk menguji kemahiran dan alatan mereka dalam persekitaran undang-undang, untuk membantu pembangun web lebih memahami proses mengamankan aplikasi web, dan untuk membantu guru/pelajar mengajar/belajar dalam persekitaran bilik darjah Aplikasi web keselamatan. Matlamat DVWA adalah untuk mempraktikkan beberapa kelemahan web yang paling biasa melalui antara muka yang mudah dan mudah, dengan pelbagai tahap kesukaran. Sila ambil perhatian bahawa perisian ini
SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan
MantisBT
Mantis ialah alat pengesan kecacatan berasaskan web yang mudah digunakan yang direka untuk membantu dalam pengesanan kecacatan produk. Ia memerlukan PHP, MySQL dan pelayan web. Lihat perkhidmatan demo dan pengehosan kami.
SublimeText3 versi Inggeris
Disyorkan: Versi Win, menyokong gesaan kod!
mPDF
mPDF ialah perpustakaan PHP yang boleh menjana fail PDF daripada HTML yang dikodkan UTF-8. Pengarang asal, Ian Back, menulis mPDF untuk mengeluarkan fail PDF "dengan cepat" dari tapak webnya dan mengendalikan bahasa yang berbeza. Ia lebih perlahan dan menghasilkan fail yang lebih besar apabila menggunakan fon Unicode daripada skrip asal seperti HTML2FPDF, tetapi menyokong gaya CSS dsb. dan mempunyai banyak peningkatan. Menyokong hampir semua bahasa, termasuk RTL (Arab dan Ibrani) dan CJK (Cina, Jepun dan Korea). Menyokong elemen peringkat blok bersarang (seperti P, DIV),
