阅读 1024

HTML5 图片上传,预览,限制图片原始宽高和尺寸

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

HTML上传文件的标签

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

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

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

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

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

只显示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>
复制代码

参考:

  • http://blog.csdn.net/testcs_dn/article/details/8695532
  • http://blog.csdn.net/oscar999/article/details/37499743/
  • http://blog.csdn.net/hdchangchang/article/details/9036511

**下一步目标:**实现拖拽上传

文章分类
阅读