input的type=file上传图片简单使用

1.HTML

<!--预览图片-->
<img id="preview" />
<br />
<!--input的type=file实现上传文件-->
<input type="file" id="filePicker"/>

2.js

var upLoadControl = function() {
	var filePicker = document.getElementById('filePicker')
	filePicker.addEventListener('change', function(e) {
		//判断是否支持FileReader
		console.log('come in');
		if(window.FileReader) {
			console.log('y');
		} else {
			console.log('n');
			alert("您的设备不支持图片预览功能，如需该功能请升级您的设备！");
			return false;
		}				
		//如果支持h5图片上传属性则往下走
		var file = e.target.files[0];
		//判断获取的是否为图片文件  
		if(!/image\/\w+/.test(file.type)){
			alert("请确保文件为图像文件");
			return false;
		}else {
			previewPic(file);
		}
	})
}();
//生成预览图
function previewPic(file) {
	var reader = new FileReader();
	reader.readAsDataURL(file);
	reader.onload = function(e) {
		//获取图片dom
		var img = document.getElementById("preview");
		//图片路径设置为读取的图片
		img.src = e.target.result;
	}			
}

3.效果

4.说明

这个属性还是蛮好用的，h5属性，在能兼容h5属性的机器上使用