插件思维:考察对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> 

版权声明:原创作品,允许转载,转载时请务必以超链接形式标明文章 原始出处 、作者信息和本声明。否则将追究法律责任。