使用JS ＜input type=“file“ /＞实现简单的选择图片并实时显示

html：

<img style="width: 200px" id="img" src="">
<input type="file"  onchange="displayimg(this)"  name="myfile">

JavaScript：

function displayimg(input){
	//获取第一个文件对象 （如果有多张时可使用循环files数组改变多个<img>的 src值）
	var file = input.files[0];
	//判断当前是否支持使用FileReader
	if(window.FileReader){
		//创建读取文件的对象
		var fr = new FileReader();
		//以读取文件字符串的方式读取文件 但是不能直接读取file 
		//因为文件的内容是存在file对象下面的files数组中的
		//该方法结束后图片会以data:URL格式的字符串（base64编码）存储在fr对象的result中
		fr.readAsDataURL(file);
		fr.onloadend = function(){
			document.getElementById("img").src = fr.result;
		}
	}
}

效果展示：