【文件上传file】图片上传插件——允许上传9张图（简易版）

七娃博客 2020-06-16 1,057人阅读

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