<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--
操作文件，客户端最常见的方式，就是用文件域做选取
默认可以选择任何类型的文件，可以用accept控制选择的mime类型
默认只能选择一个文件，如果想多选，需要设置multiple属性 multiple属性指明了该file控件可进行多选操作
-->
选择多个文件
<input id="file1" type="file" accept="image/*" multiple/>
<br />
选择单个文件
<input id="file2" type="file" accept="*/*"/>
<div id="div1">
<!--显示文件信息-->
</div>
<input type="button" id="btn" name="btn" value="onclick"/>
<script>
var btn=document.getElementById("btn");
btn.onclick=function(){
alert("再也不用在html添加onclick属性了,这个好！！！");
}
//获得dom对象
var file1 = document.getElementById('file1');
var file2 = document.getElementById('file2');
var div1 = document.getElementById('div1');
//选择文件触发事件
file1.onchange = function(e) {
//获得选取文件列表的集合
var files = this.files;
// alert('选择了' + files.length + '个文件');
var html = [];
//遍历文件列表
for (var i = 0;i < files.length;i ++) {
//获得当前文件对象
var f = files[i];
//读取文件信息拼接字符串放到数组中
//arrayObj. push([item1 [item2 [. . . [itemN ]]]]);
// 将一个或多个新元素添加到数组结尾，并返回数组新长度
html.push('<p>' + f.name + ',' + (f.type||'未知类型') + ',' + f.size + '字节</p>');
}
//在div1中显示文件信息
//arrayObj.join(separator);
//返回字符串，这个字符串将数组的每一个元素值连接在一起，中间用 separator 隔开。
div1.innerHTML = html.join('');
}
file2.onchange = function(e) {
//获得选取文件列表的集合
var files = this.files;
// 获得当前文件对象
var f = files[0];
//读取文件信息拼接字符串
div1.innerHTML = '<p>' + f.name + ',' + (f.type||'未知类型') + ',' + f.size + '字节</p>';
}
</script>
</body>
</html>
与上面的区别是：自己仿照上面写onchange=function(e){}时，执行报错！
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--选择多个文件：<input id"file1" type="file" accept="image/gif,image/png,image/jpeg" multiple/><br/><br/>-->
选择多个文件：<input id"file1" type="file" accept="image/*" multiple="multiple" onchange="filecheck(this)"/><br/>
<div id="div1"></div>
<script>
var file1=document.getElementById("file1");
var file2=document.getElementById("file2");
var div1=document.getElementById("div1");
function filecheck(obj){
var files=obj.files;
var html=[];
for (var i=0;i<files.length;i++) {
var file=files[i];
var str=" 文件名称: "+file.name+" 文件类型："+file.type+" 文件大小："+file.size+"文件路径:"+file.+"<br/>";
html.push(str);
}
console.log(html);
div1.innerHTML=html.join("");
}
</script>
</body>
</html>