File对象与File对象
Blob对象
FileReader对象
File对象
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>定义input type="file" 的样式</title>
<script type="text/javascript">
function showFileName() {
var file;
for (var i = 0; i < document.getElementById("file").files.length; i++) {
file = document.getElementById("file").files[i];
console.log(file.name);
}
}
</script>
</head> <body>
<input type="file" id="file" multiple> /*File对象 multiple熟悉允许多个file*/
<input type="button" onclick="showFileName()" value="上传文件"> /*显示上传的文件名*/
</body>
</html>
Blob对象
<!DOCTYPE html>
<html> <head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>定义input type="file" 的样式</title>
<script type="text/javascript">
function showFileInfo() {
var file;
for (var i = 0; i < document.getElementById("file").files.length; i++) {
file = document.getElementById("file").files[i];
var size = document.getElementById("size");//文件大小 单位Byte
size.innerHTML = file.size;
var type = document.getElementById("type");//文件类型
type.innerHTML = file.type;
if (!/image\/\w+/.test(file.type))/*正则表达式判断是否为图片格式*/
alert("请插入图片");
else
console.log("OK"); //打开浏览器审查元素 在console中显示
}
}
</script>
</head> <body>
<!--File->blob:size type-->
<input type="file" id="file" multiple>
<!--/*File对象 multiple熟悉允许多个file*/-->
<input type="button" onclick="showFileInfo()" value="上传文件">
<!--/*显示上传的文件名*/-->
<br> 文件大小：
<span id="size"></span></br>
文件类型：<span id="type"></span>
</body> </html>
FileReader对象