文件上传之本地预览
标签(空格分隔): fileupload html javascript
概述
文件上传需要使用input[type=”file”],如下:
<input type="file" name="upload" mutipart accept="image/*">
<!--
** 可用属性 **
type: file(必填),必须为file
multipart: 指示是否可以多选
accept : 指示文件类型,指示可选择的文件,使用逗号(,)分隔
可能的值为:
* 后缀,如.jpg,.png
* 一个有效的MIME type
* audio/* 音乐文件
* video/* 视频文件
* image/* 图片文件
-->
通过使用js的files
属性获取一个FileList实例,FileList是一个伪数组,可以通过fileList[i]以及fileList.item(i)获取File实例。File实例包括一些文件的基本属性,通过FileReader获取文件的内容。
File API
FileList
文件列表,通过files属性获取一个FileList实例。
属性&方法
fileList.item(index),获取指定索引的File对象。
fileList[index],获取指定索引的File对象。
fileList.length,获取list的长度
代码参考
// fileInput是一个 HTML input 元素: <input type="file" id="myfileinput" multiple>
var fileInput = document.getElementById("myfileinput");
// files 是一个 FileList 对象(类似于NodeList对象)
var files = fileInput.files;
var file;
//遍历所有文件
for (var i = 0; i < files.length; i++) {
// 取得一个文件
file = files.item(i);
// 这样也行
file = files[i];
// 取得文件名
alert(file.name + file.size + file.type);
}
File
文件对象,使用input[type=”file”]添加的文件,每一个文件对应一个File对象,可以用过input.files[index]
获取。
属性&方法
name DOMString 表示文件的名称,只读(对于早期版本的Gecko,使用fileName)
size unsigned long long 表示文件的大小,只读(对于早期版本的Gecko,使用fileSize)
type DOMString 文件的MIME类型,只读
代码样例
参见FileList
FileReader
使用FileReader对象,web应用程序可以异步的读取存储在用户计算机上的文件(或者原始数据缓冲)内容,可以使用File对象或者Blob对象来指定所要处理的文件或数据.其中File对象可以是来自用户在一个<input>元素上选择文件后返回的FileList对象,也可以来自拖放操作生成的 DataTransfer对象,还可以是来自在一个HTMLCanvasElement上执行mozGetAsFile()方法后的返回结果.
属性&方法
var reader = new FileReader()
abort()
readAsArrayBuffer(in Blob blob);
readAsBinaryString(in Blob blob);
readAsDataURL(in Blob blob);
readAsText(in Blob blob, [optional] in DOMString encoding),在缺省的情况下,使用UTF-8编码。error DOMError 在读取文件是发生的错误,只读
readState unsigned short 表明FileReader对象当前的状态,只读(参加状态)
result jsvar, 该值根据reader调用的方法不同而不同,参数类型如下:
* readAsArrayBuffer, result对应ArrayBuffer对象;
* readAsBinaryString, result对应一个包含所读文件的原始二进制数据;
* readAsDataURL,result对应一个字符串的URL资源。
* readAsText,result对应一个字符串,其中返回字符串按照encoding编码。
状态
EMPTY 0 还没有加载任何数据
LOADING 1 数据正在被加载
DONE 2 已完成全部的数据请求
文件本地预览
下面介绍两种文件预览的方式,可以分别预览文本文件和图片文件。
文本
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
&