HTML5 中的文件（File）操作

柔情只为你懂 2022-08-27 03:57 227阅读 0赞

HTML5中丰富了input 标签type为file的操作。

提供了一个multiple属性。以及提供了在浏览器中操作file的接口。

*type:上传文件的mime属性*

*name:上传文件的name属性*

不过最重要的还是FileReader接口，可以实现文件内容读取。

目前，FileReader接口支持的比较好的是：Firefox,Opera。

FileReader有三个方法可以获取文件内容：

*readAsDataURL();//返回一个DataURL链接，可以作为<img />标签的src属性值*

*readAsText();//返回文件文本*

*readAsBinaryString();//返回文件的二进制格式。*

所以以下的代码是基于Opera中的。也只有这两个浏览器可用。

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8" />

<title>fileReader对象的事件先后顺序</title>

<script type="text/javascript">

var result = document.getElementById('result');

if(typeof FileReader == 'undefined')\{

result.innerHTML = '<p>抱歉，您的浏览器不支持FileReader</p>';

var file = document.getElementById('file');

file.setAttribute('disabled','disabled');

\}

function readFile()\{

var file = document.getElementById('file').files\[0\];

var result = document.getElementById('result');

var reader = new FileReader();

reader.onload = function(e)\{

result.innerHTML = "<img src='"+this.result+"' />";

\}

reader.onprogress = function(e)\{

//alert('progress');

var total = e.total;

var loaded = e.loaded;

var progress = document.getElementById('progress');

progress.value = (loaded/total)\*progress.max;

\}

reader.onloadend = function(e)\{

if(e.total!=0)\{

var progress = document.getElementById('progress');

progress.value = progress.max;

\}

\}

reader.readAsDataURL(file);

\}

</script>

</head>

<body>

<p>

<label>请选择一个图像文件：</label>

<input type="file" id="file" />

<input type="button" onClick="readFile()" value="显示图像" />

<progress id="progress" max="100" value="" />

</p>

<div name="result" id="result">

</div>

</body>

</html>

使用的效果图如下：

![HTML5 中的文件（File）操作 - viowan - 休息的地方.][HTML5 _File_ - viowan - _.]

这张效果图是在Opera中的。主要实现了上传图片的预览功能。

其中还结合了progress元素。能动态显示加载的进度。

[HTML5 _File_ - viowan - _.]: http://img6.ph.126.net/93xgrz2BW2aV9ZFNqqi7Nw==/2713137300531436926.jpg

发表评论取消回复

表情：

评论列表（有 0 条评论，227人围观）

还没有评论，来说两句吧...

相关阅读

相关 HTML5中使用type=file的input上传文件权威指南

HTML5中使用type=file的input上传文件权威指南一、入门下面是大家非常熟悉的html5的文件上传代码，可不保证每个人都真的理解背后的知识点。

爱被打了一巴掌/ 2023年05月29日 07:00/ 0 赞/ 1189 阅读

相关 html5 文件在线处理,HTML 5中的文件处理之FileAPI

在众多HTML5规范中，有一部分规范是跟文件处理有关的，在早期的浏览器技术中，处理小量字符串是js最擅长的处理之一。但文件处理，尤其是二进制文件处理，一直是个空白。在一些情况下

末蓝、/ 2022年10月06日 00:45/ 0 赞/ 185 阅读

相关 html5中file对象

`<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" type="text/html;charset=G

红太狼/ 2022年09月21日 11:45/ 0 赞/ 240 阅读

相关 HTML5 中的文件（File）操作

HTML5中丰富了input 标签type为file的操作。提供了一个multiple属性。以及提供了在浏览器中操作file的接口。 type:上传文件的mime属性

柔情只为你懂/ 2022年08月27日 03:57/ 0 赞/ 228 阅读

相关文件操作File

纸上得来终觉浅 1.java文件和文件夹的操作 public class abs{ public static void main(String[] ar

青旅半醒/ 2022年07月25日 16:45/ 0 赞/ 233 阅读

相关基于html5 File API文件操作

> 文章来源：小青年原创 > 发布时间：2016-08-16 > 关键词：blob，File，FileReader，DataURI，URL > 转载需标注本文

蔚落/ 2022年06月18日 05:16/ 0 赞/ 268 阅读

相关 HTML5读取input[type=file]中的图片

概述在我们做用户注册的时候经常会设计到用户头像之类的上传，这时我们会用到一个<input type="file">标签，但是我们该怎样获取标签中选取的图片呢？

╰半夏微凉°/ 2022年06月16日 05:07/ 0 赞/ 419 阅读

相关 HTML5 - 限制input file 可选择的文件类型

前言实现选择文件并上传的功能时，都会用到 input file 控件。 `<input id="inputFile" type="file" />`

比眉伴天荒/ 2021年09月18日 13:56/ 0 赞/ 626 阅读

相关 HTML5中File对象初探

在 HTML 5 中，JavaScript 得以获得更多的权限来处理文件，而不再像这之前，只能获得一个 file input 的 DOM。根据W3C的草案，JavaScript

r囧r小猫/ 2021年07月27日 02:37/ 0 赞/ 418 阅读

相关 html5之文件和二进制的操作

历史上，JavaScript无法处理二进制数据。如果一定要处理的话，只能使用charCodeAt()方法，一个个字节地从文字编码转成二进制数据，还有一种办法是将二进制数据转成B

素颜马尾好姑娘i/ 2021年06月24日 14:34/ 0 赞/ 547 阅读