插件思维：考察对input-file属性的应用，accept/multiple，和js对输入框的监听事件onchange/oninput的使用！

HTML代码：

<input type="file" name="file" id="files" accept="image/*"  multiple="multiple"  onchange="fileSelected();"/>
<div id="box"></div>
<div id="imgbox"></div>

代码解读： input上传文件的类型是type="file"，accept限定input只能上传的文件类型，比如MP3/jpg等，multiple是否允许上传多个。

知识拓展：input标签的accept属性

以下为全部类型
*.3gpp   audio/3gpp, video/3gpp  3GPP音频/视频
*.au        audio/basic  AU音频
*.css       text/css  层叠样式表
*.doc      application/msword  Word文档
*.dwg     image/vnd.dwg  AutoCAD绘图数据库
*.dxf       image/vnd.dxf  AutoCAD绘图交换格式
*.gif        image/gif 图形交换格式
*.htm      text/html 超文本标记语言
*.html     text/html  超文本标记语言
*.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对象表示法
*.mp3       audio/mpeg  MPEG音频/视频流，第三层
*.mp4       audio/mp4, video/mp4  MPEG-4音频/视频
*.ogg        application/ogg, audio/ogg  Ogg Vorbis
*.pdf         application/pdf  便携式文档格式
*.png        image/png  便携式网络图形
*.ppt        application/vnd.ms-powerpoint  PowerPoint演示文稿
*.svf          image/vnd.svf  简单的矢量格式
*.tif           image/tiff  标记的图像格式文件
*.tiff         image/tiff  标记的图像格式文件
*.txt          text/plain  纯文本
*.wps       application/vnd.ms-works  工程文本文档
*.xhtml     application/xhtml+xml  可扩展的超文本标记语言
*.xls          application/vnd.ms-excel  Excel电子表格
*.xml        text/xml, application/xml  可扩展标记语言
*.zip         aplication/zip  压缩的档案

常用案例方法： 

仅允许多格式上传图片
<input type="file" accept="image/*" />
类型/* 表示允许类型的所有格式，等同于所有
accept="image/gif,image/jpeg,image/x-png,image/jpg,image/tiff..."

仅允许上传zip
<input type="file" accept="application/zip">

仅允许上传MP4视频
<input type="file" accept="audio/mp4, video/mp4">

js代码部分：

function fileSelected(){
	var files = document.getElementById("files").files;
	var box = document.getElementById("box");
	if(files.length>10) {
		alert("上传不能超过9个")
		return false;
	};
	for(var i = 0 ;i<files.length;i++){
		var filesize = Math.round(files[i].size / 1024);
		var html = "<p><span>文件类型："+files[i].type+"</span><span>文件大小："+filesize+"kb</span></p>";
		box.innerHTML = html;
	        var resultimg = document.getElementById('imgbox');
		var img = document.getElementById('files').files[i];
		var reader  = new FileReader();  //创建filereader对象
         	reader.readAsDataURL(img); 
         	reader.onload = function(ofile){ 
		resultimg.innerHTML += '<img src="'+ofile.target.result+'"+alt="">' 
		}
	}
 }

代码解读：

1.*input.files —— 获取输入框上传的文件，数组格式

2.*input.files.length —— 获取输入框上传文件的数量

3.*input.files[i].size —— 获取第i个文件的大小

4.通过构造函数 new FileReader() 读取上传的文件

完整代码： 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<style type="text/css">
		#imgbox {width: 100%;height: 600px;overflow: hidden;}
		#imgbox img{width: 198px;height: 198px;border: 1px solid #ddd}
	</style>
	<body>
		 <input type="file" name="file" id="files" accept="image/*"  multiple="multiple"  onchange="fileSelected();"/>
		 <div id="box">
		 	
		 </div>
		 <div id="imgbox">
		 	
		 </div>
		 <script type="text/javascript">
			 function fileSelected(){
			 	var files = document.getElementById("files").files;
			 	var box = document.getElementById("box");
			 	if(files.length>10) {
			 		alert("上传不能超过9个")
			 		return false;
			 	};
			 	for(var i = 0 ;i<files.length;i++){
			 		var filesize = Math.round(files[i].size / 1024);
			 		var html = "<p><span>文件类型："+files[i].type+"</span><span>文件大小："+filesize+"kb</span></p>";
			 		box.innerHTML = html;
			        var resultimg = document.getElementById('imgbox');
			 		var img = document.getElementById('files').files[i];
			 		var reader  = new FileReader();  //创建filereader对象
         			reader.readAsDataURL(img); 
         			reader.onload = function(ofile){ 
			              resultimg.innerHTML += '<img src="'+ofile.target.result+'"+alt="">' 
			        }
			 	}
			 	
			 }
			 	
		 </script>
	</body>
</html>