html5表单上传控件Files,文件上传读取文件里面内容

发布时间:2019-10-10  栏目:编程  评论:0 Comments

图片 1直接上可复制代码

1.File API

表单上传控件:<input type=”file” />

<!DOCTYPE html>

  一直以来,不能直接访问用户计算机中的文件都是web应用开发当中的一大障碍。File
API的宗旨是为web开发人员提供一种安全的方式,以便在客户端访问用户计算机中的文件,并更好的对这些文件进行操作。

(IE9及以下不支持下面这些功能,其它浏览器最新版本均已支持。)

<html lang=”en”>

  HTML5在DOM中为文件输入元素添加了一个files的集合,在通过文件输入字段选择了一个或多个文件时,files集合中将包含一组File对象
,每个File对象对应着一个文件,每个File对象都有下列只读对象。

1、允许上传文件数量

<head>

  name:本地文件系统中的文件名。

允许选择多个文件:<input type=”file” multiple>

<meta charset=”UTF-8″>

  size:文件的字节大小

只允许上传一个文件:<input  type=”file” single>

<meta name=”viewport” content=”width=device-width,
initial-scale=1.0″>

     type: 字符串,文件的MIME类型

 

<meta http-equiv=”X-UA-Compatible” content=”ie=edge”>

  lastModifiedDate: 文件上一次被修改时间

 

<title>Document</title>

<!DOCTYPE html>
<html>

2、上传指定的文件格式

</head>

<head>
<meta charset=”UTF-8″>
<title></title>
<script type=”text/javascript”>
window.onload = function() {
var filesList = document.getElementById(“fileList”);
filesList.addEventListener(‘change’, function(event) {
var files = event.target.files,
i=0,
len = files.length;
while(i<len){
alert(files[i].name);
i++;
}
});
};
</script>
</head>

<input type=”file” accept=”image/gif,image/png” />

<body>

<body>
<input type=”file” name=”fileList” id=”fileList” value=”” />
</body>

这里的上传格式仅指打开上传弹窗选择文件时默认的文件格式,可手动修改成其它文件格式。

<p>

</html>

如果不限制上传图片的格式可写成:accept=”image/*”

<label>请选择一个文件:</label>

不过file
API的功能不仅仅如此,通过他提供的FIleReader类型甚至还可以读取文件中的数据

其它格式参考如下:

<input type=”file” />

 

*.3gpp audio/3gpp, video/3gpp 3GPP Audio/Video
*.ac3 audio/ac3 AC3 Audio
*.asf allpication/vnd.ms-asf Advanced Streaming Format
*.au audio/basic AU Audio
*.css text/css Cascading Style Sheets
*.csv text/csv Comma Separated Values
*.doc application/msword MS Word Document
*.dot application/msword MS Word Template
*.dtd application/xml-dtd Document Type Definition
*.dwg image/vnd.dwg AutoCAD Drawing Database
*.dxf image/vnd.dxf AutoCAD Drawing Interchange Format
*.gif image/gif Graphic Interchange Format
*.htm text/html HyperText Markup Language
*.html text/html HyperText Markup Language
*.jp2 image/jp2 JPEG-2000
*.jpe image/jpeg JPEG
*.jpeg image/jpeg JPEG
*.jpg image/jpeg JPEG
*.js text/javascript, application/javascript JavaScript
*.json application/json JavaScript Object Notation
*.mp2 audio/mpeg, video/mpeg MPEG Audio/Video Stream, Layer II
*.mp3 audio/mpeg MPEG Audio Stream, Layer III
*.mp4 audio/mp4, video/mp4 MPEG-4 Audio/Video
*.mpeg video/mpeg MPEG Video Stream, Layer II
*.mpg video/mpeg MPEG Video Stream, Layer II
*.mpp application/vnd.ms-project MS Project Project
*.ogg application/ogg, audio/ogg Ogg Vorbis
*.pdf application/pdf Portable Document Format
*.png image/png Portable Network Graphics
*.pot application/vnd.ms-powerpoint MS PowerPoint Template
*.pps application/vnd.ms-powerpoint MS PowerPoint Slideshow
*.ppt application/vnd.ms-powerpoint MS PowerPoint Presentation
*.rtf application/rtf, text/rtf Rich Text Format
*.svf image/vnd.svf Simple Vector Format
*.tif image/tiff Tagged Image Format File
*.tiff image/tiff Tagged Image Format File
*.txt text/plain Plain Text
*.wdb application/vnd.ms-works MS Works Database
*.wps application/vnd.ms-works Works Text Document
*.xhtml application/xhtml+xml Extensible HyperText Markup Language
*.xlc application/vnd.ms-excel MS Excel Chart
*.xlm application/vnd.ms-excel MS Excel Macro
*.xls application/vnd.ms-excel MS Excel Spreadsheet
*.xlt application/vnd.ms-excel MS Excel Template
*.xlw application/vnd.ms-excel MS Excel Workspace
*.xml text/xml, application/xml Extensible Markup Language
*.zip aplication/zip Compressed Archive

<input type=”button” value=”读取文本文件utf-8″ onclick=”readAsText()”
/>

FileReader类型实现的是一种异步文件读取机制,方法如下:

 

</p>

1.readAsText(file,encoding)
 以纯文本形式读取文件,将读取的文件保存到result属性中。

 

<div name=”result”></div>

2.readAsDataURL(file)  读取文件将文件以数据URI的形式保存在result中

3、FileList上传文件数组

</body>

3.readAsBinaryString(file)
 读取文件并将一个字符串保存在result属性中。字符串中每个字符表示一字节

FileList对象都是一组文件对象的集合,而文件对象则拥有下列的属性:
name – 文件名(不包含路径)
type – 文件的MIME类型(小写)
size – 文件的尺寸(单位为字节)

留下评论

网站地图xml地图