<body>
<input type="file" multiple size="80" id="file">
<button οnclick="showName()">上传</button>
<script type="text/javascript">
function showName(){
var file;
//document.getElementById('file').files返回fileList文件列表对象
var len = document.getElementById('file').files.length;
for(let i = 0; i<len; i++){
//file对象为用户选择单个文件
file = document.getElementById('file').files[i];
//此处可以针对fileList文件列表中每个文件进行多种处理
alert(file.name)
}
}
</script>
</body>
</html>file弹出文件名
blob表示二进制原始数据，他提供一个slice方法，可以通过该方法访问到字节内部的原始数据块。事实上，上面提到的file对象也继承了这个blob对象
blob对象有两个属性，size属性表示一个blob对象的字节长度，type属性表示blob的mime类型，如果是未知类型，则返回空字符串。
对于图像类型的文件，blob对象的type属性都是以“image/”开头 的，后面是图像的类型，利用此特性我们可以在js中判断用户选择的文件是否为图像，在图片上传时可以利用该规则进行文件筛选。
另外，html5中在file控件中添加了accept属性，可以在用户选择时提前限制文件的类型，但是这个还是能更改成所有的文件
例：<input type="file" id="file" accept="image/*" />
<title>blob对象</title>
<style>
</style>
</head>
<body>
<input type="file" multiple size="80" id="file">
<button οnclick="fileUpdate()">上传</button>
<script type="text/javascript">
function fileUpdate(){
var file;
//document.getElementById('file').files返回fileList文件列表对象
var len = document.getElementById('file').files.length;
for(let i = 0; i<len; i++){
//file对象为用户选择单个文件
file = document.getElementById('file').files[i];
//此处可以针对fileList文件列表中每个文件进行多种处理
if(!/image\/\w+/.test(file.type)){
alert('上传文件格式不正确');
break;
}else{
//此处为上传代码
alert('上传成功');
}
}
}
</script>
fileReader接口主要用来把文件读入内存，并且读取文件中的数据。fileReader接口提供了一个一部API，使用该API可以在浏览器主线程中一部访问文件系统，读取文件中的数据。各个浏览器支持的程度不同，有一种方法可以检测浏览器是否支持fileReader
if(typeof FileReader == 'undefined'){
alert('no')
}else{
alert('yes')
}需要注意的是：无论读取成功或失败，方法不会返回读取结果，这一结果存储在result属性中。
方法名 参数 描述
readAsBinaryString file讲一个文件读取为二进制码
readAsText file,[encoding]将文件读取为文本
readAsDataURL file将文件读取为DataURL
abort （none）中断读取操作
readAsText：该方法有两个参数，第二个是文件的编码方式，默认utf-8。将文件以文本方式读取，读取结果即是这个文本文件中的内容。
readAsBinaryString：这个方法将文件读取为二进制字符串，通常我们将它传送到后端，后端利用这段字符串存储文件。
readAsDataURL：该方法将文件读取为一串DataURL字符串，该方法实际上是将小文件以一种特殊格式的URL地址形式直接读取入页面。这里的小文件通常是指图像与html等格式的文件。
fileReader的接口事件：
除了以上的方法外，fileReader接口还包含了一套完整的事件模型，用于捕获读取文件时的状态
事件 描述
onabort 数据读取中断时触发
onerror 数据读取出错时触发
onloadstart数据读取开始时触发
onprogress 数据读取中
onload 数据读取成功完成时触发
onloadend 数据读取完成事触发，无论成功或失败
扫一扫
8万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
