HTML5 图片上传，预览，限制图片原始宽高和尺寸-CSDN博客

**前言：**该解决方案只支持IE10及以上，目前来看IE9及以下所占的份额越来越小了，如果在项目不需要考虑IE9及以下的情况下，使用HTML5是最好的方案。

HTML上传文件的标签

<input type="file"> 最基本的上传文件标签

<input type="file" multiple=""> 可以进行多文件上传的标签

<input type="file" accept=".jpg,.gif"> 可以对上传类型进行限制的标签

使用accept属性对上传文件类型进行限制很方便，但是很容易被破解。如下图：

使用accept进行控制只允许上传jpg后缀的文件： <input type="file" accept=".jpg"> 点击上传按钮如下图：

但是当我们选择右下角的文件类型为所有文件，如下图：

所以目前看来使用accept属性对上传文件类型进行限制基本上算是防君子不防小人了。

JS对应的事件和file控件DOM对象的接口

file控件上传文件时触发的事件是onchange。

file控件DOM对象提供了多个文件操作API：

FileList对象表示用户选择的文件列表，在HTML4中file控件内只允许放置一个文件，但在HTML5中通过添加multiple属性，file控件内允许放置多个文件。控件内的每一个用户选择的文件都是一个file对象，而FileList就是这些file对象的列表，代表用户选择的所有文件。 **调用方法：**假设file控件DOM对象名为file，则调用方法为file.files。
file对象有两个属性，一个是name，代表文件名不包含文件的路径；一个是lastModifiedDate，表示文件最后被修改的日期。 **调用方法：**假设file控件DOM对象名为file，则第一个用户选择文件的调用方法为file.files[0]。
HTML5中Blob表示二进制原始数据，它提供一个slice()方法，可以通过这个方法访问到字节内部的原始数据块。事实上，上面提到的file对象继承了Blob对象。Blob对象的两个属性， size：表示一个对象的字节长度。 type：表示一个对象的MIME类型，如若是未知类型返回空字符串。 **调用方法：**没有调用方法，只是file控件DOM对象的file对象继承了Blob对象。

FileReader接口

四个方法：

方法名	参数	描述
readAsBinaryString()	file	将文件读取为二进制字符串，通常将它传到后端，后端可以通过这段字符串存储文件
readAsDataURL()	file	将文件读取为一段data url字符串，事实上是将小文件以一种特格式的URL地址直接读取到页面。小文件通常指图片与html等格式文件
readAsText()	file [encoding]	将文件以文本的方式读取，其中第二个参数为文本的编码
abort()	(none)	中断读取操作

监听事件：

事件	描述
onabort	数据读取中断时发生
onerror	数据读取出错时发生
onloadstart	数据读取开始时发生
onload	数据读取成功完成时发生
onloadend	数据读取完成时发生无论读取成功还是失败
onprogess	数据读取中

一个简单的例子：只实现了IE10以上的图片上传预览，已经获取文件类型，大小和宽高，并且打印了日志，但是没有阻止上传。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<form action="">
		<div><img src="" alt=""></div>
		<input type="file" multiple="">
	</form>
<script>
	var img1 = document.querySelector('img');
	var div = document.querySelector('div');
	var input = document.querySelector('input');
	input.onchange = function () {
		if (input.files && input.files[0]) {
			if(input.files[0].type == "image/jpeg" || input.files[0].type == "image/gif" || input.files[0].type == "image/png"){
				var byteSize = input.files[0].size / 1024;
				if(byteSize <= 250){
					var reader = new FileReader();
					reader.readAsDataURL(input.files[0]);
					reader.onload = function(ev){
						var txt = ev.target.result;
						var img = new Image();
						img.src = txt;
						img.onload = function(){
							if(img.width <= 500 && img.height <= 500){
								console.log("图片没有错");
								img1.src = txt;
							}else{
								console.log("尺寸不对 " + img.width + "*" + img.height);
							}
						}
					}
				}else{
					console.log("文件大小超出 " + byteSize);
				}
			}else{
				console.log("文件类型不对 " + input.files[0].type);
			}
		}else{
			console.log("没有上传，使用默认");
		}
	}
</script>
</body>
</html>
复制代码